webpack打包过程是先打包然后再放到浏览器运行,这个打包过程随着项目代码的叠加,开发过程中等待打包的时间也会边长。而vite2是先将项目放到浏览器环境下,使浏览器接管了打包程序的部分工作,只需要在浏览器请求源码时进行转换并按需提供源码,这大大增加了开发效率。同时vite2与vue3和typescript更加适合。
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 |
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') } } }) |
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') |
下一篇:Vue.js中v-model父子组件通信双向数据绑定(父子篇)
共 0 条评论关于"vite中引入vue-router路由vite2+vue3+TS+vue-router"
最新评论