jzfai / vue3-admin-template

🎉 A new generation vue3 admin template, It's easy and fast!
https://github.com/jzfai/vue3-admin-template.git
MIT License
359 stars 98 forks source link

element-plus安裝問題 #2

Closed deadislove closed 2 years ago

deadislove commented 3 years ago

我看官網上可以使用vite或webpack,可以請問一下,為何你選擇vite嗎?

jzfai commented 3 years ago

我简单的说下吧: webpack: 打包编译:从main.js进行打包,将所有的依赖都会打包进入,将打包完后的bundle里的 index.js 交给浏览器访问(浏览器加载时全量引入) 编译更新: 涉及到相应更改文件的依赖会全部重新编译然后重新加载 vite2: 利用浏览器的esm(es module) 打包编译:只用插件进行转换(例如用 @vitejs/plugin-vue 插件进行代码转换): 初次只会通过url 的形式加载index.js文件,相关依赖文件不会加载进来,实现真正的懒加载,而webpack会全加载 编译更新: 更改的文件会更新,文件的依赖不会更新

总结: 如果项目比较小两者区别不大,当项目比较大的时候会发现webpack编译更新速度比较慢(特别是相关依赖和组件比较多的时候)有时可能要好几秒才出来,而vite2对应大项目来说编译更新都是秒级的,开发体验好

参考: https://www.jianshu.com/p/2aa6b82b1f34

deadislove commented 3 years ago

我简单的说下吧: webpack: 打包编译:从main.js进行打包,将所有的依赖都会打包进入,将打包完后的bundle里的 index.js 交给浏览器访问(浏览器加载时全量引入) 编译更新: 涉及到相应更改文件的依赖会全部重新编译然后重新加载 vite2: 利用浏览器的esm(es module) 打包编译:只用插件进行转换(例如用 @vitejs/plugin-vue 插件进行代码转换): 初次只会通过url 的形式加载index.js文件,相关依赖文件不会加载进来,实现真正的懒加载,而webpack会全加载 编译更新: 更改的文件会更新,文件的依赖不会更新

总结: 如果项目比较小两者区别不大,当项目比较大的时候会发现webpack编译更新速度比较慢(特别是相关依赖和组件比较多的时候)有时可能要好几秒才出来,而vite2对应大项目来说编译更新都是秒级的,开发体验好

参考: https://www.jianshu.com/p/2aa6b82b1f34

我的專案本身有加入PWA,且我利用vue cli,直接下vue add element-plus。是否再依據element-plus文件敘述安裝vite,會是更好的選擇呢?

jzfai commented 3 years ago

不是很理解你的问题, image vite2 其实你也可以理解和webpack一样,只是构建方式不一样

deadislove commented 3 years ago

不是很理解你的问题, image

因為,我看到element-plus有寫一段文字敘述,如下圖 image

我就在想說,是不是建立一個基本vue 3專案(vue 3 + element-plus + vite), 是不是比較適合給新手磨練技術?

cfmj commented 2 years ago

使用element-plus 不是必须要vite 如果练手的话重新建个项目(vue 3 + element-plus + vite) 这个项目就可以