vu3+vite+typescript体验

什么是viteViteVite是面向现代浏览器，基于原生模块系统ESModule实现按需编译的Web开发构建工具，基于Rollup封装。优点快速启动冷服务器即时热模块更换(HMR)真正的按需编译vite初始化npmnpminitvite-appcdnpminstallnpmrundevyarnyarncreatevite-appcdyarnyarndev虽然Vite最初是为与Vue3一起工作而设计的，但它也可以支持其他框架。例如，尝试npminitvite-app--templatereact或--templatepreact这里我们使用npminitvite-appvite-ts-vue配置依赖cdvite-ts-vuenpminstall//安装项目依赖npmi-Stypescriptvue-router@next//集成TypeScriptvue-routernpmi-Deslinteslint-plugin-vue//集成eslintnpmiless--save-dev//集成css预编译lessnpmrundev项目配置配置vite.config.js类似于`vue-cliImportpathfrom'path'module.exports={//importfolderalias:{'/@/':path.resolve(__dirname,'./src'),'/@views/':path.resolve(__dirname,'./src/views'),'/@components/':path.resolve(__dirname,'./src/components'),'/@utils/':path.resolve(__dirname,'./src/utils'),},//配置Dep优化行为optimizeDeps:{include:["lodash"]},}配置main.ts，修改main.js为main.ts，因为我们项目需要使用typescript开发修改index.html......如果不这样修改，main.js是找不到的。其实这就是配置router的入口文件。在src新建一个router文件夹，放到文件夹createindex.tsimport{RouteRecordRaw,createRouter,createWebHistory}from'vue-router';constroutes:RouteRecordRaw[]=[{path:'/',name:'Home',component:import('/@views/index.vue'),}];constrouter=createRouter({history:createWebHistory(),routes,});导出默认路由器；新页面index.vue