Use vite to quickly build Vue3

 Vite Official Documentation:  Getting Started | Vite Official Chinese Documentation

npm init vite@latest
或者
yarn create vite
或者
pnpm create vite

port 8080 change 8000

Add --port 8000 to the dev of the scripts in the package.json file. For example:

  "scripts": {

    "dev": "vite --port 8000",

    "build": "vite build",

    "preview": "vite preview"

  },

vite process is not defined error

You can add 'process.env': {} to define in vite.config.js file. as follows

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  define: {
    'process.env': {}
  }
})

or

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  define: {
    'process.env': process.env
  }
})

vue3 dynamic routing parameter passing

// router/index.js
import { createRouter, createWebHistory } from 'vue-router'
// 引用的两种方法
import callPage from "../view/callPage.vue"; // 方法一

//路由数组
const routes = [
    {
        path: "/",
        name: "callPage",
        component: callPage,
        children: []
    },
    {
        path: "/calendarDom/:id",
        name: "calendarDom",
        component: () => import('../view/calendarDom.vue'), // 方法二
        children: []
    }
]

//路由对象
const router = createRouter({
    history: createWebHistory(process.env.BASE_URL),
    routes //上面的路由数组
})

//导出路由对象，在main.js中引用
export default router

// main.js
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'

createApp(App)
.use(router)
.mount('#app')

// App.vue

<script setup>
</script>

<template>
  <router-view></router-view>
</template>

<style scoped>
</style>