搞清webpack、vite、vue-cli、create-vue的区别

1.要区分脚手架、构建项目、打包代码的概念  

  1.1脚手架:创建项目,选择性安装需要的插件,指定统一的风格,生成demo。(vue-cli和create-vue是由vue提供的脚手架,创建项目时提供选择是否要安装某些插件,最后会生成统一的项目结构和文件,@vue-cli3以上和create-vue是基于vite去创建项目)//vue2是打包基于wepack

  1.2构建项目:建立项目的运行环境,需手动安装插件(vite不是专门为vue服务,可以生成多种不同类型的项目环境和模板,使用npm create vite@latest my-vue-app --template vue可以创建vue3项目,与使用vue-cli和create-vue创建vue项目是一致的。vite包含的打包工具是rollup,因此创建的项目是直接使用rollip打包。)

  1.3打包项目:代码写好之后,为了更好的使用,需要打包处理(webpack和rollip都是打包工具)

 

2.vue-cli  --指令vue create projectName依然采用webpack来构建项目

 

3.create-vue --指令npm init vue@latest采用vite创建项目,项目名创建时再填写,要求node版本高

 

 4.vite -- 要求node版本高

 

 5.rollup

 

 6.webpack

 

 6.总结

 

posted on 2022-12-14 10:25  ChoZ  阅读(2353)  评论(0编辑  收藏  举报

导航