Vite+Vue3+TypeScript基础知识案例.pdfVIP

Vite+Vue3+TypeScript 2021年最新最完整Vite+Vue3+TypeScript基础知识案例⼀ 1、学习背景 随着前端web应⽤的需求 断发展和变化 ，vue⽣态圈也紧跟开发者步伐 ， 断演化。尽管vue2.0已经很完善了，很多⼈掌握的vue2.0 ， 感觉实在学不动了，意料之外的是尤先⽣继续更新vue到3.0版本，以补充vue2.0的不⾜之处。随着vue3.0问世，vite2.5.1也油然⽽ ⽣，vue始终没有放弃对项 ⽬响应速度和编译速度的追求 ，vite的到来，对于前端开发者⽽⾔，简直不要太幸福了。vue3.0不仅全⾯⽀持 TypeScript语法 ，还对⽣命周期钩⼦进⾏了优化和剔除，加上⼯具setup的语法糖 ，vue单页⾯多个根元素的扩展 ，代码精简 说 ，还很有 条理 ，vue3.0的出现再次提升了开发者的编码体验和幸福感。另外vue3整合typescript语⾔是前端未来发展的必然趋势，⽽⽣为vue家族 的新成员vite也是前端技术爱好者的学习⽬标，赢在起点，从学习新技术开始。活到⽼，学到⽼，是⼀个合格前端开发者的毕⽣信仰。 2、vite简介 vite诞⽣是为了提升web项⽬运⾏性能，以更快的速度将应⽤页⾯展⽰给⽤户。Vite 以 ⽅式提供源码。这实际上是让浏览器接管了打包程序的 部分⼯作：Vite 只需要在浏览器请求源码时进⾏转换并按需提供源码。根据情景动态导⼊代码，即只在当前屏幕上实际使⽤时才会被处理。 提供的驱动⼒： 2.1 、优化缓慢的服务器启动（冷启动开发服务器和正式环境响应速度）； 2.2 、优化缓慢的项 ⽬更新 （vite服务器）； [外链图⽚转存失败,源站可能有防盗链机制,建议将图⽚保存下来直接上传(img-znQlBkN0-1642383363135) (E:\vue_project\javascript-demo\前端知识点\vite+vue3最新技术栈\vue3.1.png)] [外链图⽚转存失败,源站可能有防盗链机制,建议将图⽚保存下来直接上传(img-Nro6Ko6e-1642383363136) (E:\vue_project\javascript-demo\前端知识点\vite+vue3最新技术栈\vue3.2.png)] 3、vite创建项⽬ 兼容性注意: Vite 需要 版本 = 12.0.0。 必须安装Volar插件 ，⽤vscode编辑器 1 // 安装vite 1、npm init vite@latest // 安装vite同时创建vite项⽬ 2、npm init vite@latest my-vue-app --template vue { scripts: { dev: vite, // 启动开发服务器 build: vite build, // 为⽣产环境构建产物 serve: vite preview // 本地预览⽣产构建产物 } } 4、版本依赖兼容和项⽬⽬录介绍 package.json版本依赖说明, 这⾥是整个项⽬依赖版本配置，相关安装指令后⾯视频中会逐个教⼤家如何安装。 注意：vuex和router都是4.0及以上版本的，否则⽤vue3时，找不到暴露的api 2 { name: vite-ts-vue3-plus-demo, version: 0.0.0, scripts: { dev: vite, build: vue-tsc --noEmit vite build, serve: vite preview }, dependencies: { @element-plus/icons: 0.0.11, dotenv: ^10.0.0, element-plus: ^1.1.0-beta.7, vue: ^3.0.5, vue-router: ^4.0.11, vuex: ^4.0.2 }, devDependenc