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

PAGE PAGE 1 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 只需要在浏览器请求源码时进?转换并按需提供源码。根据情景动态导?代码，即只在当前屏幕上实际使?时才会被处理。 提供的驱动?： 、优化缓慢的服务器启动（冷启动开发服务器和正式环境响应速度）； 、优化缓慢的项?更新（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编辑器 // 安装 // 安装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 {name: { 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 }, devDependencies: { @types/node: ^16.7.1, @vitejs/plugin-vue: ^1.3.0, @vue/compiler-sfc: ^3.0.5, node-sass: ^6.0.1, sass: ^1.38.1, sass-loader: ^12.1.0, typescript: ^4.3.2, vite: ^2.4.4, vue-tsc: ^0.2.2 } } 5、setup语法糖使? setup前?组合式API（基础?法） 注意：在setup()中不能?this 在 `setup` 在 `setup` 中你应该避免使? `this`，因为它不会找到组件实例。`setup` 的调?发?在 `data` property、`computed` property 或 `meth