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 を応援していただければ幸いです。 以下もご興味があるかもしれません:
|
<<: Windows での自動展開に Jenkins を使用するチュートリアル図
>>: MySQL 5.7.21 winx64 無料インストールバージョン設定方法グラフィックチュートリアル
CUDA とは何かを紹介するのではなく、複数の CUDA バージョンの共存とリアルタイム切り替えをど...
この記事では、Docker を使用して Centos6 に Zookeeper をデプロイする方法に...
文字列を配列に分割するには、次の 3 つの MySQL 関数を使用する必要があります。 REVERS...
int(1) の長さ 1 は、許可されたストレージ幅を表していないことはすでにご存知かもしれません...
1pxの線が太くなる理由モバイルプロジェクトに取り組むとき、設計図に従って要素ノードのサイズとスタイ...
Webページを作るときに、区切り線hrを使うことがありますが、IE6やIE7で表示するのは非常に苦痛...
序文デモでは古いバージョンのブラウザのグラデーションが実装されています[IE9-]。 IE9 より前...
エディターは、Vue3のデータの関連する問題も共有します。次のような例を見てみましょう。 Vue.c...
MySQL サービスを使用する場合、通常の状況では、MySQL のタイムアウト設定は 8 時間 (2...
目次DOMノード要素ノード:テキストノード:プロパティ ノード:要素を取得getElementByI...
携帯モバイル ページは Chrome および Safari とのみ互換性があればよいため、カスタム ...
Web テーブルの構造マークアップについて説明する前に、いくつかの画像を見てみましょう。 HTML ...
1. DOCTYPE は必須です。ブラウザは宣言した DOCTYPE に基づいてページのレンダリング...
CSSファイルに書き込むコードをコピーコードは次のとおりです。 01.html {グレイスケール(1...
目次シングルスレッド非同期シングルスレッドしかし、開発中にネットワーク リクエストやスケジュールされ...