Vite 构建项目 & 路由配置
1.构建项目
(xxx表示项目名称)
npm create vite@latest xxx
2.载入依赖
npm install
3.载入路由router
npm install vue-router@next
4.运行项目
npm run dve //mac 需要权限运行 sudo npm run dve
5.配置路由
(与 webpack构建vue-cil)配置一致
配置方式
//1 安装vue-router npm install vue-router@next //end //2 main.js页面引入 import { createApp } from 'vue' import App from './App.vue' import router from './router' const app = createApp(App) app.use(router) app.mount('#app') //end //3 新建router文件夹 index.js 创建路由并输出对象 import { createRouter, createWebHashHistory } from 'vue-router' const routes = [ { path: '/', name: 'login', component: () => import('../views/HomeLogin.vue') }, { path: '/HomeView', name: 'home', children: [ // (子路由 需要在父页面 放置 <router-view /> 标签) { path: '/HomeView', component: () => import('./../views/AboutView.vue') }, { path: '/HomeView', component: () => import('./../views/AaaaView.vue') }, ] }, ] // 创建路由 const router = createRouter({ history: createWebHashHistory(), //process.env.BASE_URL已废弃 //createWebHistory routes }) // 输出对象 export default router //end //4 vue页面 <template> <router-view/><!-- router-view 必须存在的路由 --> </template> //end //5.页面跳转 //import { useRoute, useRouter } from 'vue-router' //相当于vue2中的 $route 发出 和 $router 接收 <template> <button @click="gohome"></button> </template> <script setup> import { useRouter } from 'vue-router' const $router = useRouter()//路由口 function goHome(){//跳转 $router.push('/HomeView'); } </script>
6.打包项目
npm run build
项目生成后在build文件夹
383 Views