使用vite搭建vue3项目vue-router

Vite是一个快速的前端构建工具，特别适合用于Vue3项目的开发。它通过预加载、树状模块化和SSR（服务器端渲染）等特性，提供高效的开发体验。Vue Router 是 Vue.js 的官方路由库，用于处理URL到组件的映射。 以下是使用Vite搭建Vue3项目并集成Vue Router的基本步骤： 1. **安装依赖**: - 初始化一个新的Vue3项目：`npm create vue@next` - 安装Vite和Vue Router：`npm install vite @vue/cli-plugin-vite router-view-component` 2. **配置Vite**: - 更新 `vite.config.js` 文件，引入Vue Router插件，并设置基本配置： ```js import { defineConfig } from 'vite'; import vue from '@vitejs/plugin-vue'; import { createRouter, createWebHistory } from 'vue-router'; export default defineConfig({ plugins: [vue(), ...], server: { port: 3000, }, build: { target: 'esnext', }, // 添加路由配置 resolve: { alias: { '@': path.resolve(__dirname, './src'), 'vue-router': 'vue-router' } }, // 配置Vue Router optimizeDeps: { include: ['vue-router'] }, }); ``` 3. **创建路由**: - 创建`src/router`文件夹，并在其中创建`index.ts`。初始化一个简单的路由实例： ```ts import { createRouter, createWebHashHistory } from 'vue-router'; import Home from '@/views/Home.vue'; // 导入你的视图组件 const routes = [ { path: '/', component: Home }, // 添加更多路由... ]; const router = createRouter({ history: createWebHashHistory(), routes, }); export default router; ``` 4. **在组件中使用router-view**: - 在需要展示路由内容的地方导入`router-view`组件： ```html <template> <div id="app"> <router-view></router-view> </div> </template> ``` 5. **导航守卫** (可选)： - 如果需要权限控制或其他自定义功能，可以设置导航守卫，如`beforeEach`和`asyncData`。 完成以上步骤后，运行 `npm run serve`，你应该能在浏览器中看到基于Vue Router管理的页面切换了。