vue 3.0プロジェクトの構築と使用プロセス

最近では、古いプロジェクトを再構築し、新しい技術スタックを使用するように指導しています。はい、秀一波さんが新しく勉強したのです。
あまり多くないです。私のショーを始めます。以下は私の個人的な理解と使用習慣だけです。参考にしてください。
一：プロジェクトの構築
1.自分でviteを配置することができますが、時間を節約するために、足場を使って直接構築します。興味があれば、viteを研究してもいいですか？それとも香りがいいですか？
2.プロジェクト生成：iTerm下：vue create myproject

その後、自分の要求によって、異なる配置を選択します。

私たちが必要な3.xを選択します。
その後、要求通りにrouterを配置します。すでにpack.jsonです。そしてnpm run serve

OKです。基本的な3.0プロジェクトの構築が完了し、終了します。それは不可能です
二：ディレクトリ構造
元のディレクトリ構造を以下に示します。

データ管理を便利にするために、他のファイルをカスタマイズする必要があります。以下は簡単なデモ構造です。

いくつかの共通のコンポーネントを定義する方法で、複数のコンポーネントの中で多重化してもいいし、vuexと併用してもいいです。
typingはいくつかのtsタイプを定義します。たとえば:


異なるコンポーネントに従って異なるタイプを分割し、その後、同じindexで導出する。indexにはいくつかの共通のタイプが定義されてもよい。
requestはhttp要求を定義します。

base.ts基本経路
appi.ts集合appi  
http.tsはaxiosを作って、ブロックと配置をお願いします。development，product）
全体の配置は大体このようにして、appiとtsタイプを集中して、後の管理に便利です。
コンポーネントの内部でも分割が必要です。

これはaboutページです。vueファイルと内部Hooksのフォルダがあります。vueファイルは基本的なdemo構造です。ヤフーでは、機能によって異なるファイルを分割します。例えば、listDown Hooks.tsファイルはプルダウンメニューを出す方法で集合します。スタイルファイルを単独で分割することもできます。
ディレクトリ構造はこのようです。まずtypingで基本的なデータタイプを定義してから、各コンポーネントの下のHooksの中の方法を導入してから.vueファイルの中で対応する方法を使います。
三：Compsition App
Compsition Appiは、機能に基づく追加のAPIのセットであり、コンポーネント論理を柔軟に結合することができる。tsに合わせて食べたほうがいいです。
1.defineComponent
Compsition Appから解凍し、配合ts。コンポーネントを定義:
export default defineComponent({}
tsを使わないなら、export default{}という書き方もできます。
2.セットアップ
Compsition Appのコア部分は、vue 3.0のハイライトです。代替前のbeforeCreateとcreatedライフサイクル。

いくつかの応答データはsetupで初期化されてもよい。
setupは2つのパラメータ、propsとctx（コンテキスト）を受け入れます。
propsは伝統的な親データです。setupでpropsを展開することは提案されません。これはpropsに応答を失うことになります。
ctxでは、sleots、atrs、emit、用法は2.0に類する。
3.refとreactive
応答データを作成する方法です。vueから解凍する  =>    import{ref，reactive}from'vue'
ref使用:

import {ref, defineComponent} from 'vue';
export default defineComponent({
 setup() {
  const number = ref(0);
  console.log(number); 
  return {
   number
  }
 }
})

refによって応答データを作成して、consoneを見てください。

これはref式応答データです。私たちは操作する時number.valueを通じてデータを操作して結果をリセットします。
ref宣言の基本タイプと引用タイプの違いは？
ref宣言の基本タイプは、refを作成した応答オブジェクトです。
ref宣言引用タイプは、refを作成したオブジェクトでもありますが、内部はreactive方法で包装された応答式のオブジェクトです。
もしあなたのrefオブジェクトがreactiveに変更されたら、直接にkey、value方法で取得できます。
reactive使用:

import {reactive, defineComponent, toRefs} from 'vue';
export default defineComponent({
 setup() {
  const obj = reactive({   
    menuList: [] as Array<T>
   });
  console.log(number); 
  return {
    ...toRefs(obj);
  }
 }
})

proxy式の応答データを作成します。torefsを通じてデータをリセットします。内部はこうです。

個人的な感想：いくつかの基本的なタイプはref定義を多く使うことができ、全体の定義に対してreactiveを使うことができます。
その他:
他のいくつかのよく使われている方法は、例えば、computed、watchなど、実は2.0と同じです。ここでは多く説明しません。
四：基本使用：
基本的なニュースリストを例にとります。

主にmounted段階でデータを取り、ページをめくる時にデータを更新します。
ディレクトリ:
src->view->News->Hook->news ListHook.ts（リストデータを処理するためのもの）
ファイルに元のデータを定義します。

let dataSource = reactive({
 list: [] as Array<InewsList> // InewsList      
});

news List（）方法を定義し、インターフェースデータを取得するためのget List法を内部に含む。一つの方法は改ページ要求時にトリガし、get Listをmountedにマウントする。その後、データと方法をリセットします。コードは以下の通りです

/** * 1.        */import api from '../../../request/api';
import {reactive, onMounted} from 'vue';
import {InewsList} from '../../../typing';
export function newsList(): object { 
 let dataSource = reactive({list: [] as Array<InewsList>});
 function getList(obj: object): void {
  api.newsList(obj).then(res => {
   dataSource.list = res.data.data; })
 };
 function onChange(e: any): void {
  let start = e || 10;
  const obj = {start,num: 10};
  getList(obj);
 }; 
 onMounted(() => {
  const startObj = {start: 1, num: 10};
  getList(startObj);
 }); 
 return {
  dataSource,
  getList,
  onChange
}}

その後src->views->News->News.vueファイルで使用されます。

import {newsList} from './Hook/newslistHook';
export default defineComponent({ 
  name: 'news',
  setup() { 
  const list = newsList();
  return {
   ...list // list              。
  } 
}})

ソロでリスト：

これで直接にvueファイルにレンダリングできます。
まとめてみます。必要なものをいくつかのイベント（click、mousedown、keyup…）にして、hookで実行できます。vueファイルはデータレンダリングに使います。
プロジェクトでは、antdのVueフレームを使用していますので、必要に応じてロードしたほうがいいです。なにしろ、antdは大きすぎます。

import Menu from 'ant-design-vue/es/menu/index'
import Select from 'ant-design-vue/es/select/index'
createApp(App).use(store).use(router).use(Menu).use(Select)

はい、ここまでです。新人はvue 3.0を書いてみます。足りないところはたくさん指摘してください。
以上がvue 3.0プロジェクトの構築と使用プロセスの詳細です。vue 3.0プロジェクトの構築と使用に関する資料は他の関連記事に注目してください。