vue脚手架2.0和4.0+对比1.命令：install//2.0npminstallvue-cli-g//4.0+npminstall-g@vue/cli初始化一个新项目：//2.0defaultStandardversion:vueinitwebpackprojectname简体版:vueinitwebpack-slimpleprojectname//4.0+vuecreateprojectname注意：安装@vue/cli需要先卸载vue-cli。如果需要同时使用vue-cli和@vue请安装/cli:npminstall-g@vue/cli-init-g//安装后也可以使用vueinit命令。另外，在终端输入vueui会在浏览器中打开一个页面，可以通过可视化的方式创建一个项目有选项：Pleasepickapreset：选择configurationDefault([Vue2]babel,eslint)//vue2默认配置Default(Vue3Preview)([Vue3]babel,eslint)//vue3默认配置Manuallyselectfeatures//manuallyselectoptions:||||||:---|--------------------------------|------------------------------------------------------------|----||序列号|选项|说明|||1|选择Vue版本||||2|通天塔|vue项目中常用ES6语法，但是有时候我们的项目需要兼容低版本浏览器。这时候就需要引入babel插件将es6转es5|||3|打字稿|TypeScript添加了类型以扩展JavaScript通过了解JavaScript，TypeScript可以节省您在代码运行之前捕获错误和提供修复的时间。任何浏览器，任何操作系统，任何运行JavaScript的地方。完全开源|||4|渐进式Web应用程序(PWA)支持|渐进式Web应用程序(PWA)支持|||5|路由器|路由|||6|浏览器|状态管理模式。它使用集中式存储来管理应用程序所有组件的状态，并使用相应的规则来确保状态以可预测的方式变化|||7|CSS预处理器|CSSpre-processors，预处理器：比如要使用sass或者css，你必须按照别人规定的语法形式，也就是写在他们的语法里面，然后他们会把你写的代码转成css。|||8|棉绒/格式化程序|格式器|||9|单元测试|单元测试|||10|端到端测试|installingdependencies://选择安装依赖时使用的包管理器UseYarn默认值UseNPMYarn和npm都是包管理工具，但是yarn是一个全新的，重新设计的npm客户端，于2016年10月发布，按月发布。与npm相比，yarn在运行速度上有明显的提升，安装时间更少，功能上也有很多改进。yarn的优点：安装速度快（服务器速度快，而且是并行下载和离线模式）版本锁缓存机制，可以参考npm和yarn的区别，进一步了解安装依赖：初始化后，需要npminstall安装依赖，4.0+不需要这个操作，初始化时已经自动下载运行：//2.0npmrundev//4.0+-组件库手动选择配置：勾选你的项目需要的特性：(\*)ChooseVueversion//指定vue版本(\*)Babel//babel编译(\*)TypeScript()ProgressiveWebApp(PWA)Support//是否支持**ProgressiveWebApp**(pwa)可以看【简单介绍ProgressiveWebApp（PWA）】（https://juejin.cn/post/6844903556470816781)()Router()Vuex(\*)CSSPre-processors//是否启用css预处理器，如sass,stylus(\*)Linter/Formatter//是否进行代码格式化校验，如eslint(\*)UnitTesting//测试框架的引入()E2ETesting选择你想要启动项目的Vue.js版本（使用方向键）//选择项目中的Vue版本>2.x3.x（预览版）使用类式组件语法？**是**//你是否使用类风格的组件语法(TypeScript)将Babel与TypeScript一起使用（现代模式、自动检测的polyfills、转译JSX是必需的）？**YES**//是否使用babel做ts转义并提供对jsx的支持PickaCSSpre-processor(PostCSS,AutoprefixerandCSSModulesaredefaultsupported):(Usearrowkeys)//选择css预编译**Sass/SCSS+node-sass**Sass/SCSS(withdart-sass)>Sass/SCSS(withnode-sass)LessStylusPickalinter/formatterconfig:(Usearrowkeys)//选择语法检查方法使用标准版的eslint进行格式校验。tslint在2019年停止维护，迁移到eslint【放弃TSLint，使用ESLint】（https://blog.csdn.net/qq_37164975/article/details/109766695)仅具有错误预防功能的ESLintESLint+AirbnbconfigESLint+PrettierTSLint（已弃用）选择额外的lint功能：（按
---check-version.js//检查node、npm等版本---dev-client.js//hotreload相关---dev-server.js//搭建本地服务器---utils.js//搭建工具相关---webpack.base.conf.js//webpack基础配置---webpack.dev.conf.js//webpack开发环境配置---webpack.prod.conf.js//webpack生产环境配置-config//项目开发环境配置---dev.env.js//开发环境变量---index.js//部分项目配置变量---prod.env.js//生产环境变量---test.env.js//测试环境变量-src//源码目录---components//vue公共组件---asset//静态资源---store//vuex的状态管理---App.vue//页面入口文件---main.js//程序入口文件，加载各种公共组件-static//静态文件，比如一些图片，json数据等.babelrc//babel编译配置。gitignore//git上传需要忽略的文件格式README.md//项目描述package.json//项目基本信息.eslintrc.js//Eslint配置文件-public//公共文件夹---index.jshtml//入口html文件-src---assets//放置静态文件的目录---components//Vue公共组件---App.vue//页面入口文件---main.ts//入口文件,因为TypeScript使用了tsend---shims-vue.d.ts//定义文件，为了识别vue文件中的ts部分。browserslistrc//配置文件在不同前端工具浏览器和node版本中的作用是设置compatibility.eslintrc.js//Eslint配置文件，不用于过多介绍。gitignore//git上传需要忽略的文件package.json//基础工程InformationREADME.md//项目说明tsconfig.json去掉配置文件目录config和build文件夹，如果需要自定义配置，需要自己新建一个vue.config.js文件去掉static静态资源文件夹，添加public文件夹和静态资源转移到public目录下，可以直接通过/xx.xx访问，index.html移动到public目录结构更简洁3.webpack打包：默认版本是different:2.0+一般使用webpack34.0+一般使用webpack4,可以参考Webpack4.x实践了解更多webpack4的内容以及目录和webpck3的区别：2.0+目录下有一个build文件夹用来存放webpack的各种配置+-----build------build.js//生产环境构建------check-versions.js//检查版本(node,nmp)------utils.js//构建相关工具-------vue-loader.conf。js//vue的各种loader配置------webpack.base.conf.js//webpack基础配置------webpack.dev.conf.js//webpack开发环境配置------webpack.prod.conf.js//webpack生产环境的配置4.0+嵌入了webpack的所有基础配置，并提供了集成的默认值，webpack的config配置将不再出现在目录中。那么，需要特殊配置的时候怎么办呢？官方提供了一个vue.config.js文件用于修改配置。也可以参考vue.config.js配置和vue4.0vue.config.js配置。实际包装效率：4.0+以包装和运行效率而言优于2.0+灵活性：cli2更个性化，配置更友好。webpackcli4更加通用，实现了真正的开箱即用，几乎零配置，打包打包了最适合开发的配置。vuecli3.0和4.0对比：两者差别不大。命令是相同的。与3.0相比，4.0有更丰富的自定义选项。目录：（3.0>4.0）主要是路由和vuex默认目录的变化babel配置上的babelpreset由@vue/appvue/babel-preset-app改为@vue/cli-plugin-babel/preset优化编译打包效率，升级"@vue/cli-plugin-babel"v3版本升级到v4"@vue/cli-plugin-eslint"v3版本升级到v4"@vue/cli-service"v3版本升级到v4sass-loaderv7版本升级到v8core-jsv2版本升级到v3webpack-chain从v4升级到v6css-loader从v1升级到v3url-loader从v1升级到v2file-loader从v3升级到v4copy-webpack-plugin升级到v4从v1版本升级到v5erser-webpack-plugin从v3版本升级到v2@vue/cli-plugin-pwa到v4新插件vueaddvuexvueaddrouterpug-plain已更名为pug-plain-loaderobsoletevue-cli-servicetest:e2e@vue/cli-plugin-unit-mochaupgradetoMocha6@vue/cli-plugin-unit-jestjest从v23升级到v24@vue/cli-plugin-typescript更好的ts(x)支持，比js(x)更好
