vite 安装vue-router

Vite 是一个快速的前端构建工具，它通过即时热更新和高效的模块预加载来提升开发效率。Vue Router 是 Vue.js 的官方路由库，用于处理单页面应用 (SPA) 中的URL变化以及视图的动态切换。

要在 Vite 中安装 Vue Router，你需要遵循以下步骤：

1. **初始化项目**：首先确保你已经全局安装了 `npm` 或 `yarn`。如果还没安装，可以在命令行运行 `npm i -g create-vite` 或者 `yarn global add create-vite`。

2. **创建新项目**：使用 Vite 创建一个新的项目，例如：

   npx create-vite my-vue-app

或者

   vite create my-vue-app

3. **安装依赖**：进入项目目录后，运行安装命令以添加 Vue 和 Vue Router 到 `package.json` 文件中：

   cd my-vue-app
   npm install vue@next vue-router --save

或者

   yarn add vue@next vue-router

4. **配置文件**：在 `vite.config.js` 或 ` vite.config.ts` 文件中，引入并配置 Vue Router。示例：

   import { defineConfig } from 'vite'
   import vue from '@vitejs/plugin-vue'
   import { createRouter, createWebHistory } from 'vue-router'

   export default defineConfig({
     plugins: [vue()],
     build: {
       target: 'esnext', // 设置目标环境
     },
     server: {
       middlewareMode: true,
     },
     router: () => {
       const router = createRouter({
         history: createWebHistory(process.env.BASE_URL), // 使用 web 驱动的历史模式
         routes: [
           // 你的路由配置
         ]
       })
       return router
     }
   })

5. **导入和使用**：在需要的地方，如 App.vue 或 main.js，导入 Vue Router 并将其挂载到 Vue 实例上：

   import { createApp } from 'vue'
   import App from './App.vue'
   import router from './router' // 导入你的路由实例

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