webpack打包过程是先打包然后再放到浏览器运行，这个打包过程随着项目代码的叠加，开发过程中等待打包的时间也会边长。而vite2是先将项目放到浏览器环境下，使浏览器接管了打包程序的部分工作，只需要在浏览器请求源码时进行转换并按需提供源码，这大大增加了开发效率。同时vite2与vue3和typescript更加适合。
vite项目创建
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | # npm 6.x npm init @vitejs/app my-vue-app --template vue # npm 7+, 需要额外的双横线： npm init @vitejs/app my-vue-app -- --template vue # yarn yarn create @vitejs/app my-vue-app --template vue vanilla vue vue-ts react react-ts preact preact-ts lit-element lit-element-ts |
1 2 3 | 创建完项目后要进入项目文件夹 npm install 安装所需的npm包 |
路由管理
1 2 | 在vite2的模板默认安装下是没有路由的需要自行安装 npm install vue-router@4 |
新建router文件夹创建index.ts
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 | // 引入创建路由管理器 引入创建路由模式 history模式 import { createRouter, createWebHistory } from 'vue-router' import Home from "@/view/home.vue" // 使用别名@ // 引入路由各页面配置 const routes=[ { path: '/', redirect: '/index' }, { path: '/home', name: 'home', component: Home }, { path: '/index', component: ()=>import('../pages/index.vue') } ] // 创建路由管理器 模式和路由 const router=createRouter({ history: createWebHistory(), routes }) export default router |
@别名配置
1 2 3 4 5 6 7 8 9 10 11 12 | import { defineConfig } from 'vite' import vue from '@vitejs/plugin-vue' const path = require('path') // https://vitejs.dev/config/ export default defineConfig({ plugins: [vue()], resolve: { alias: { '@': path.resolve(__dirname, 'src') } } }) |
main.ts引入路由管理器
1 2 3 4 5 | import { createApp } from 'vue' import App from './App.vue' import router from './router/index' createApp(App).use(router).mount('#app') |
本站所有文章、图片、资源等如无特殊说明或标注，均为来自互联网或者站长原创，版权归原作者所有；仅作为个人学习、研究以及欣赏！如若本站内容侵犯了原著者的合法权益，可联系我们进行处理，邮箱：343049466@qq.com
标签：
下一篇：Vue.js中v-model父子组件通信双向数据绑定（父子篇）
共 0 条评论关于"vite中引入vue-router路由vite2+vue3+TS+vue-router"
最新评论