vite を使用して vue3 アプリケーションを構築する方法

//グローバルインストール npm install -g @vue/cli
＃ または
糸グローバル追加 @vue/cli
//グローバルアンインストール npm uninstall -g vue-cli
＃ または
糸グローバル削除 vue-cli
// CLI をアップグレード
npm アップデート -g @vue/cli
＃ または
糸グローバルアップグレード --latest @vue/cli
// ローカル CLI バージョンを確認する vue --version

//新しいプロジェクトを作成 npm init vite-app asiterVue3
//ディレクトリに入る cd asiterVue3
//依存関係をインストール npm install
//npm run dev を実行

「vue」から createApp をインポートします。
「./App.vue」からアプリをインポートします。
「./index.css」をインポートします。

createApp(App).mount("#app");

「vue」からVueをインポートします。
「./App」からAppをインポートします。
Vue.config で productionTip を false に設定します。

新しいVue({
 el: "#app",
 コンポーネント: { アプリ },
 テンプレート: "<App/>",
});

//ここで Vetur プラグインはエラーを報告しますが、<template> の使用には影響しません。
 <img alt="Vue ロゴ" src="./assets/logo.png" />
 <HelloWorld メッセージ="こんにちは Vue 3.0 + Vite" />
</テンプレート>
<スクリプト>
'./components/HelloWorld.vue' から HelloWorld をインポートします。
エクスポートデフォルト{
 名前: 'アプリ'、
 コンポーネント:
  こんにちは世界
 }
}
</スクリプト>

npm インストール vue-router@next -S

<スクリプト>
   const { createRouter、createWebHistory、createWebHashHistory } = VueRouter
   const {createApp} = Vue

   const ホーム = {
    テンプレート: `<div>home</div>`,
   }

   const Foo = { テンプレート: '<div>foo</div>' }
   const Bar = { テンプレート: '<div>bar</div>' }

   const ルーター = createRouter({
    履歴: createWebHistory(),
    ルート: [
     { パス: '/'、コンポーネント: ホーム },
     { パス: '/foo'、コンポーネント: Foo },
     { パス: '/bar'、コンポーネント: Bar },
    ]、
   })

   const アプリ = createApp({})
   app.use(ルーター)

   window.vm = app.mount('#app')
</スクリプト>

「vue-router」から createRouter、createWebHashHistory をインポートします。

エクスポートデフォルトcreateRouter({
 履歴: createWebHashHistory(),
 ルート: [
  {
   パス: "/weclome",
   コンポーネント: () => import("../views/HelloWorld.vue"),
  },
 ]、
});

<テンプレート>
 <div>helloWord!Vue3.0.Asiter へようこそ</div>
</テンプレート>

<テンプレート>
 <ルータービュー></ルータービュー>
</テンプレート>

<スクリプト>
エクスポートデフォルト{
 名前:「アプリ」、
 コンポーネント: {},
};
</スクリプト>

「vue」から createApp をインポートします。
「./App.vue」からアプリをインポートします。
「./index.css」をインポートします。
「./route」からルーターをインポートします。
アプリを作成します(アプリ)
 .use(ルーター)
 .mount("#app");

npm と vuex@next -S

「vuex」から createStore をインポートします。

エクスポートconstストア=createStore({
 州（） {
  戻る {
   カウント: 1,
  };
 },
});

「vuex」から createStore をインポートします。

エクスポートconstストア=createStore({
 州（） {
  戻る {
   著者:「アシター」
   「フィルムを貼る少年」と表現する。
  };
 },
});
 

「vue」から createApp をインポートします。
「./App.vue」からアプリをインポートします。
「./index.css」をインポートします。
「./route」からルーターをインポートします。
「./store」から store をインポートします。
アプリを作成します(アプリ)
 .use(ルーター)
 .use(ストア)
 .mount("#app");
 

<テンプレート>
 <div>helloWord!Vue3.0.Asiter へようこそ</div>
</テンプレート>

<スクリプト>
エクスポートデフォルト{
 マウント() {
  console.log("この男性は誰ですか: >> ", this.$store.state.author);
  console.log("彼はどうですか: >> ", this.$store.state.describe);
 },
};
</スクリプト>