使用 vite 快速搭建 Vue3

 vite 官方文档： 开始 | Vite 官方中文文档

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

端口 8080 更改 8000

package.json 文件里 的 scripts 的 dev 加上  --port 8000 。 例如：

  "scripts": {

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

    "build": "vite build",

    "preview": "vite preview"

  },

vite process is not defined 报错

可以在  vite.config.js 文件里 的 define 加上 'process.env': {}。 如下

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

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

或者

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 动态路由传参

// 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>