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

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 を応援していただければ幸いです。

以下もご興味があるかもしれません:
  • Vite+ElectronでVUE3デスクトップアプリケーションを素早く構築
  • 古い Vue プロジェクトに Vite サポートを追加する方法
  • vite2.0+vue3 モバイルプロジェクトの詳細な説明
  • vite を使用して vue3 アプリケーションを構築する方法
  • Vue3とViteについて

<<:  Windows での自動展開に Jenkins を使用するチュートリアル図

>>:  MySQL 5.7.21 winx64 無料インストールバージョン設定方法グラフィックチュートリアル

推薦する

MySQL マルチマスターと 1 スレーブのデータバックアップ方法のチュートリアル

概要いずれかのデータベースに対する操作は他のデータベースに自動的に適用され、2 つのデータベースのデ...

高速でクールな揺れアニメーション効果を実現するCSS

1. Animate.css の紹介Animate.css は、Web プロジェクトですぐに使用で...

JS でタブ効果を書く

この記事の例では、タブ効果を記述するためのJSの具体的なコードを参考までに共有しています。具体的な内...

MySQL データベース SELECT クエリ式分析

データ管理の大部分は検索であり、SELECT はその大部分を占めています。 SELECT selec...

Linux カーネル デバイス ドライバー キャラクタ デバイス ドライバー ノート

/******************** * キャラクターデバイスドライバー**********...

MySqlサブクエリINの実装と最適化

目次IN が遅いのはなぜですか? INとEXISTSのどちらが速いでしょうか?効率を向上させるにはど...

Linux でスレッドを作成するための pthread_create の具体的な使用法

pthread_create関数機能紹介pthread_createはUNIX環境のスレッド作成関数...

CSS3で実装された炎のアニメーション

成果を達成する実装コードhtml <div class="コンテナ">...

IE6 で幅と高さがおかしいバグ

図に示すように: しかし、IE6で表示すると、right:1px:になります。 IE6 には、幅と高...

Nginx でアクセス頻度、ダウンロード速度、同時接続数を制限する方法

1. アクセス頻度、同時接続、ダウンロード速度を制限するために使用されるモジュールと命令の概要ngx...

この記事はVueのライフサイクルを理解するのに役立ちます

目次1. beforeCreate & created 2. マウント前とマウント済み3. ...

ブラウザの自動フォーム入力によるウェブページのスタイル損失の原因の分析と解決

バックエンドからフロントエンドまで、なんと悲劇なのでしょう。他の人の CSS を自分の jsp We...

Linux デスクトップ用に Openbox を設定する方法 (推奨)

この記事は、「24 Days of Linux Desktop」の特別シリーズの一部です。 Open...

Vueのドラッグスクリーンショット機能を実装する簡単な方法

マウスをドラッグしてページのスクリーンショットを撮ります(指定した領域にスクリーンショットをドラッグ...

iframe を更新する 3 つの方法

コードをコピーコードは次のとおりです。 <iframe src="1.htm&quo...