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 無料インストールバージョン設定方法グラフィックチュートリアル
概要いずれかのデータベースに対する操作は他のデータベースに自動的に適用され、2 つのデータベースのデ...
1. Animate.css の紹介Animate.css は、Web プロジェクトですぐに使用で...
この記事の例では、タブ効果を記述するためのJSの具体的なコードを参考までに共有しています。具体的な内...
データ管理の大部分は検索であり、SELECT はその大部分を占めています。 SELECT selec...
/******************** * キャラクターデバイスドライバー**********...
目次IN が遅いのはなぜですか? INとEXISTSのどちらが速いでしょうか?効率を向上させるにはど...
pthread_create関数機能紹介pthread_createはUNIX環境のスレッド作成関数...
成果を達成する実装コードhtml <div class="コンテナ">...
図に示すように: しかし、IE6で表示すると、right:1px:になります。 IE6 には、幅と高...
1. アクセス頻度、同時接続、ダウンロード速度を制限するために使用されるモジュールと命令の概要ngx...
目次1. beforeCreate & created 2. マウント前とマウント済み3. ...
バックエンドからフロントエンドまで、なんと悲劇なのでしょう。他の人の CSS を自分の jsp We...
この記事は、「24 Days of Linux Desktop」の特別シリーズの一部です。 Open...
マウスをドラッグしてページのスクリーンショットを撮ります(指定した領域にスクリーンショットをドラッグ...
コードをコピーコードは次のとおりです。 <iframe src="1.htm&quo...