Implementation of Vue 3.x project based on Vite2.x

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

npm install vue-router@4 --save

// Router 4.x
import { createRouter, createWebHashHistory, RouteRecordRaw } from "vue-router";
const routes: Array<RouteRecordRaw> = [
  {
    path: "/",
    name: "Home",
    component: () => import("../views/Home/index.vue"),
  },
  {
    path: "/login",
    name: "Login",
    component: () => import("../views/Login/index.vue"),
  },
];
const router = createRouter({
  history: createWebHashHistory(),
  routes
});
export default router;

const router = createRouter({
  history: createWebHashHistory(), // Hash mode history: createWebHistory(), // History mode });

// vite.config.ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
const { resolve } = require('path')

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  // Define relative path, @ replaces resolve: {
    alias: {
      '@': resolve(__dirname, 'src')
    }
  }
})

npm i vuex@next --save

npm install vant@next --save

//main.ts
import { createApp } from "vue";
import App from "./App.vue";
import router from "./router";
import store from "./store";
import Vant from "Vant";
import "vant/lib/index.css"; // Global import style createApp(App).use(router).use(store).use(Vant).mount("#app");

<template>
   <div>
      <van-nav-bar title="Title" left-text="Back" right-text="Button" left-arrow fixed @click-left="onClickLeft" @click-right="onClickRight" />
      <van-nav-bar title="Title" left-text="Back" right-text="Button" left-arrow @click-left="onClickLeft" @click-right="onClickRight" />
   </div>
</template>

<script lang="ts">
import { defineComponent } from "vue";

export default defineComponent({
   setup() {
      const onClickLeft = () => Toast("Return");
      const onClickRight = () => Toast("button");
      return {
         onClickLeft,
         onClickRight,
      };
   },
});
</script>

// utils/util.ts
// Simple pop-up window import { Toast } from "Vant";
export const toast = (text: string) => {
  Toast(text);
};

import { defineComponent } from "vue";
import { toast } from "@/utils/util";

export default defineComponent({
   setup() {
      const onClickLeft = () => toast("Return");
      const onClickRight = () => toast("button");
      return {
         onClickLeft,
         onClickRight,
      };
   }
});