vue3.0+vant3.0の迅速なプロジェクト構築の実装

vue --version または vue -V 

npm アップデート -g @vue/cli

npm インストール -g @vue/cli

vue create hello-world (これはあなた自身のプロジェクト名です)

'vue' から {createApp} をインポートします。
'./App.vue' からアプリをインポートします。
'./router' からルーターをインポートします
'./store' からストアをインポートします
import http from './utils/http'; //ここに私が独自にカプセル化したaxiosがあります
'vant' から Button をインポートします。

const アプリ = createApp
//vue3.0 では、以前のように vue のプロトタイプ オブジェクトにパブリック メソッド プロパティをマウントできなくなりました //ここでは、オブジェクトである 2 番目のパラメーターにパブリック メソッド プロパティを記述できます //コンポーネントの登録は .use チェーンを通じて呼び出されます app(App, { http }).use(Button).use(store).use(router).mount('#app')

<テンプレート>
  <div class="home">
    {{ num }}----{{activeNum}}----{{refData}}
    <!-- vant コンポーネントの使用法 -->
    <van-button size="large" type="primary" @click="changeNum">変更番号</van-button>

    <van-button type="success" @click="routerPush">ルートジャンプ</van-button>
  </div>
</テンプレート>

<スクリプト>
// オンデマンドで導入する必要があるモジュール import { toRefs, reactive, onMounted, getCurrentInstance,watch ,computed,ref} from "vue";
エクスポートデフォルト{
  名前: "ホーム",
  // vue2.0 と同じで、親コンポーネントから渡された値と main.js で渡された値を受け入れます props: ["http"],
  // セットアップで記述する必要があります setup(props, context) {
    //ここの ctx は vue2 のこれに似ています
    const { ctx } = getCurrentInstance();
    //ルーティング this.$router
    定数ルーター = ctx.$router;
    // main.js によって渡されたカプセル化された axios
    定数 http = ctx.http;
     // 毎回新しいレスポンシブデータをrefでラップするのは面倒なので、このように書くことはやはりお勧めしません。const refData = ref('1212') // refはレスポンシブオブジェクトにラップされます。// vue2のデータと同様に、このように書く方が快適だと思います。
    const state = reactive({//関数は通常のオブジェクトを受け取り、応答性の高いデータオブジェクトnum: 0, を返します。
    });
    // 計算プロパティをオブジェクト内に記述すると、計算プロパティのメソッドが混在して区別がつかなくなるのを防ぐことができるため、計算プロパティをオブジェクト内に記述するのが好きです。const computedData = {
      // 計算プロパティを書くときは、computed をインポートすることを忘れないでください
      activeNum: 計算された(()=>state.num*2)
    }
    // オブジェクト内にメソッドを書くのが好きです。その方が明確で、プロパティメソッドの計算が混在して区別がつかなくなるのを防ぐことができるからです。const methods = {
      変更番号: () => {
        状態.num++;
        // ref で囲まれたデータは .value refData.value++ を使用して取得する必要があります
      },
      ルータープッシュ() {
        //ルートジャンプ router.push({
          名前: "テスト",
        });
      },
      //ネットワークリクエスト async getUserInfo() {
        試す {
          {データ} = http.get("http://localhost:3000/xiaochengxu/"); を待機します。
          コンソールにログ出力します。
        } キャッチ（エラー）{
          コンソール.log(エラー);
        }
      },
    };
    // vue2 のマウントと同じです。vue 3 では、boforcreate と created の 2 つのライフサイクルが削除されます。setup は、これら 2 つのライフサイクルの間にある新しいライフサイクルです。onMounted(() => {
      メソッド.getUserInfo();
    });
    //watchの使用watch(()=>state.num,value=>{
      console.log('数値が変更されました',値)
    })
    //使用するにはテンプレートに戻る必要があります return {
      ...toRefs(state), // レスポンシブ オブジェクトを通常のオブジェクトに変換します。state.num を使用する必要はありません。num を直接使用できます...methods, // 分解代入...computedData,
      参照データ
    };
  },
};
</スクリプト>