使⽤vue3.0+vite+element-plus搭建项⽬（vite源码解读）
写在前⾯
在vue3刚出来的时候，就去了解vue3相关语法和使⽤。最近恰逢公司某新项⽬启动，搓搓⼩⼿，就采⽤vue3.0去搭建编写（不过这个项⽬⽤的是vue-cli4脚⼿架⽣成的项⽬，内置webpack，所以写的时候也只能先⽤webpack）。现在项⽬进程⼀半有余，也踩了很多坑，感悟了vue3函数编程的魅⼒。不过！这⼏天⼜痴迷于尤⼤⼤⼒推的vite！本着对新技术的探索和分享精神（哈哈还有蹭Vite的热度），决定整理⼀篇vite相关⼊门和解读的⽂章。
准备⼯作
1.vue3.0
建议先有⼀些vue语法知识储备
在 Vue3.x 是兼容 Vue2.x 的语法的， Vue2.x 的90%语法能正常在 Vue3.x 中运⾏
从vue2.x到vue3.x，这其实是由完全⾯向对象OOP的思路，到函数式编程的思想转变。
Options API到 Composition API的转变。（实在不会使⽤⼀些语法糖，就将就使⽤vue2.x的语法吧）
2. vite
vite⼯具是写这篇⽂章的唯⼀⽬的，具体了解可以看看⽂档：vue3中⽂⽂档-vite，vite-github
尤⼤⼤说Vite是前端下⼀代打包⼯具。咱⽤奥运精神总结就是：更⾼、更快、更强。
image.png
在本⽂的Vite模块，也会加⼤篇幅解读Vite相关的源码
3.element-plus
⽂档地址：Element Plus
vue element adminElement Plus，⼀套为开发者、设计师和产品经理准备的基于 Vue 3.0 的桌⾯端组件库
⽬录结构.png
3. 启动项⽬
Vite帮我们⽣成的⽬录结构很简洁，主要⽂件和 vue-cli 的⽂件都是⼀样的，但是对⽐ vue-cli 新建的新项⽬的webpack启动，Vite启动真的很
快了，甚⾄说启动时间可以忽略不计了
启动项⽬.png

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。