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

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

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

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

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

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

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

npm i vuex@next --save

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

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

<テンプレート>
   <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("ボタン");
      戻る {
         左クリック時、
         右クリック時、
      };
   },
});
</スクリプト>

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

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

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