Vite2.x に基づく Vue 3.x プロジェクトの実装

Vue 3.x プロジェクトの作成

npm init @vitejs/app my-vue-app --template

ルーター 4.x の紹介

npm インストール vue-router@4 --save

ルートの設定

ディレクトリにルーターフォルダを追加し、index.jsを作成します。

Router 4.x では、ルートを作成するために、Router 3.x の new VueRouter の代わりに createRouter が提供されます。

// ルーター 4.x
「vue-router」から createRouter、createWebHashHistory、RouteRecordRaw をインポートします。
const ルート: Array<RouteRecordRaw> = [
  {
    パス： "/"、
    名前: "ホーム",
    コンポーネント: () => import("../views/Home/index.vue"),
  },
  {
    パス: "/login",
    名前: "ログイン",
    コンポーネント: () => import("../views/Login/index.vue"),
  },
];
const ルーター = createRouter({
  履歴: createWebHashHistory(),
  ルート
});
デフォルトルーターをエクスポートします。

Router 4.x では、ハッシュモードと履歴モードを設定するための createWebHashHistory メソッドと createWebHistory メソッドが提供されます。

const ルーター = createRouter({
  history: createWebHashHistory(), // ハッシュ モード history: createWebHistory(), // 履歴モード });

相対パスの設定

以前の VueCli では、WebPack パッケージングツールのメリットを活用し、特定のシンボルを直接使用して現在のパスを表すことができました。同様に、Vite は、resolve.alias プロパティも提供します。

// vite.config.ts
'vite' から {defineConfig} をインポートします
'@vitejs/plugin-vue' から vue をインポートします
const { 解決 } = require('path')

// https://vitejs.dev/config/
デフォルトのdefineConfigをエクスポートする({
  プラグイン: [vue()],
  // 相対パスを定義します。@ は、resolve: { に置き換えられます。
    エイリアス: {
      '@': 解決(__dirname, 'src')
    }
  }
})

Vuexをインポートする

Vuex を導入したら、ディレクトリ内に src/store/index.ts という新しいファイルを作成します。

npm i vuex@next --save

ヴァントの紹介

ダウンロード

npm インストール vant@next --save

vite バージョンでは、Vant 3.0 内のすべてのモジュールが ESM に基づいて記述されており、当然オンデマンドで導入できる機能があるため、コンポーネントのオンデマンドロードを構成する必要はありませんが、すべてのスタイルを導入する必要があります。

//メイン.ts
「vue」から createApp をインポートします。
「./App.vue」からアプリをインポートします。
「./router」からルーターをインポートします。
「./store」からストアをインポートします。
「Vant」からVantをインポートします。
import "vant/lib/index.css"; // グローバルインポートスタイル createApp(App).use(router).use(store).use(Vant).mount("#app");

Vue 3.x では setup 関数が追加されましたが、setup 内の this は undefined を参照するため、Vant の一部のグローバルメソッドは使用できません。

<テンプレート>
   <div>
      <van-nav-bar title="タイトル" left-text="戻る" right-text="ボタン" 左矢印固定 @click-left="onClickLeft" @click-right="onClickRight" />
      <van-nav-bar title="タイトル" left-text="戻る" right-text="ボタン" 左矢印 @click-left="onClickLeft" @click-right="onClickRight" />
   </div>
</テンプレート>

<script lang="ts">
「vue」からdefineComponentをインポートします。

エクスポートデフォルトdefineComponent({
   設定（） {
      const onClickLeft = () => Toast("Return");
      const onClickRight = () => Toast("ボタン");
      戻る {
         左クリック時、
         右クリック時、
      };
   },
});
</スクリプト>

上記の例では、Toast は定義されていません。これは、Vant をグローバルに適用した後、ローカルで参照できないためです。そうしないと、Vite はエラーを報告します。

この問題は、Toast を再度カプセル化するツールクラスを作成することで解決できます。

// ユーティリティ/util.ts
// シンプルなポップアップウィンドウ import { Toast } from "Vant";
エクスポート const toast = (テキスト: 文字列) => {
  トースト(テキスト);
};

「vue」からdefineComponentをインポートします。
"@/utils/util" から { toast } をインポートします。

エクスポートデフォルトdefineComponent({
   設定（） {
      const onClickLeft = () => toast("Return");
      const onClickRight = () => toast("ボタン");
      戻る {
         左クリック時、
         右クリック時、
      };
   }
});

これで、Vite2.x に基づく Vue 3.x プロジェクトの構築と実装に関するこの記事は終了です。より関連性の高い Vite 構築 Vue3 プロジェクトコンテンツについては、123WORDPRESS.COM の以前の記事を検索するか、次の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM を応援していただければ幸いです。

以下もご興味があるかもしれません: