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 無料インストールバージョン設定方法グラフィックチュートリアル

推薦する

UbuntuはCUDAの複数のバージョンをインストールし、いつでも切り替えることができます

CUDA とは何かを紹介するのではなく、複数の CUDA バージョンの共存とリアルタイム切り替えをど...

CentOS 6 は Docker を使用して Zookeeper 操作例を展開します

この記事では、Docker を使用して Centos6 に Zookeeper をデプロイする方法に...

Mysqlはストアドプロシージャを通じて文字列を配列に分割します

文字列を配列に分割するには、次の 3 つの MySQL 関数を使用する必要があります。 REVERS...

MySQL の int(n) の後の n はどういう意味ですか?

int(1) の長さ 1 は、許可されたストレージ幅を表していないことはすでにご存知かもしれません...

モバイル開発における 1px ラインの理解と解決策

1pxの線が太くなる理由モバイルプロジェクトに取り組むとき、設計図に従って要素ノードのサイズとスタイ...

ブラウザ間の hr 区切り文字の違い

Webページを作るときに、区切り線hrを使うことがありますが、IE6やIE7で表示するのは非常に苦痛...

CSS3で線形グラデーションを実装するためのコードの詳細な説明

序文デモでは古いバージョンのブラウザのグラデーションが実装されています[IE9-]。 IE9 より前...

Vue3 の参照と参照の詳細

エディターは、Vue3のデータの関連する問題も共有します。次のような例を見てみましょう。 Vue.c...

操作タイムアウトがないときにMySQLサーバーがアクティブに切断される問題を解決します

MySQL サービスを使用する場合、通常の状況では、MySQL のタイムアウト設定は 8 時間 (2...

Javascript DOM、ノード、要素取得の紹介

目次DOMノード要素ノード:テキストノード:プロパティ ノード:要素を取得getElementByI...

スクロールバーを非表示にしながらもスクロール効果を維持する純粋な CSS (モバイルと PC)

携帯モバイル ページは Chrome および Safari とのみ互換性があればよいため、カスタム ...

HTMLウェブページテーブル構造化マークアップの応用に関する簡単な説明

Web テーブルの構造マークアップについて説明する前に、いくつかの画像を見てみましょう。 HTML ...

HTML ページ出力で従うべきいくつかの原則の要約

1. DOCTYPE は必須です。ブラウザは宣言した DOCTYPE に基づいてページのレンダリング...

ウェブページを白黒に変換します(Google、Firefox、IE、その他のブラウザと互換性があります)

CSSファイルに書き込むコードをコピーコードは次のとおりです。 01.html {グレイスケール(1...

JS の 3 つの主要な問題、非同期性とシングルスレッドについて簡単に説明します。

目次シングルスレッド非同期シングルスレッドしかし、開発中にネットワーク リクエストやスケジュールされ...