前端开发3年了，竟然不知道什么是Vue脚手架？（下）

　　上一篇文章《前端开发3年了，竟然不知道什么是Vue脚手架？（上）》介绍了什么是脚手架，以及Vuecli2。x如何创建项目，创建的项目结构。这篇文章介绍Vuecli3。x如何构建项目？一、Vuecli2与Vuecli3的区别vuecli3是基于webpack4打造的，vuecli2还是webpack3。vuecli3的设计原则是0配置，移除build和config等配置目录。vuecli3提供了vueui命令，提供可视化配置，更加人性化。vuccli3移除static文件夹，新增public文件夹，index。httml移入了public文件夹。
　　接下来看看，vuecli3是如何创建项目的，以及可视化配置是怎么样的？二、VueCLI3。x初始化项目
　　2。1、新建项目文件夹，打开命令行vuecreatelearn
　　运行以上命令，创建文件名为learn的vue项目。
　　运行命令如下图：
　　方框内提示我们发现有可用新版本脚手架，可以运行下边命令进行更新。
　　下边有三个选项，分别为：Pleasepickapreset：（Usearrowkeys）请选择一个已配置的关键字选项default（babel，eslint）默认的，选babel和eslint包Manuallyselectfeatures手动选择需要的特性
　　2。2、选择最后一个手动配置
　　选择之后，如上图。最前边的括号内有个绿色星号，表示被选中，我们可以使用上下箭头进行切换，点击空格进行选中和取消。
　　根据需要，选择完成之后，点击回车继续向下。
　　2。3、选择配置文件类型
　　Indedicatedconfigfiles独立配置文件
　　Inpackage。json配置信息放入package。json文件
　　选择独立配置文件之后，继续向下。
　　2。4、是否保存本次创建项目特性作为配置项？
　　提示后携带（yn），输入y表示确定保存配置，n表示取消保存。
　　我们选择y保存之后，以后创建项目就不需要选择这么多了，一键就可以生成项目。
　　紧接着需要配置键值，下次我们可以通过键值就能看到，比如设置一个前端人的简写：qdr。回车之后项目就开始创建了。
　　2。5、如何查看之前保存的配置选项，如果不需要了我们如何删除呢？
　　再次创建项目的时候，第一个选项就多了一项，如图：
　　第一个qdr是我们上次创建项目保存的配置信息。如果我们不想要了，或者保存的多了之后，把不常用的就需要删除掉，可以进入：CuserAdministrator查找。vuerc文件。
　　rcruncommand，vuerc也就是vue的运行命令，它的内容如下：｛useTaobaoRegistry：true，presets：｛qdr：｛useConfigFiles：true，plugins：｛vueclipluginbabel：｛｝｝｝｝，latestVersion：4。5。13，lastChecked：1630908642473｝
　　我们只需要删除presets中，不想要的配置项就好了，再运行命令，命令中就没有了。
　　如此，我们的vuecli3的项目就创建完成了。三、Vuecli3项目结构介绍
　　对新建的项目结构截图，如下图：
　　它们的文件以及对应的意义如下：nodemodules项目需要用的node包public相当于static文件夹，原样输出src开发资源。browserslistrc浏览器相关配置。gitignore设置提交git的忽略信息babel。config。js对babel配置信息packagelock。json记录依赖包的真实版本package。json配置文件README。md使用介绍四、项目运行
　　打开package。json文件，查找scripts内运行脚本，我们发现server。scripts：｛serve：vuecliserviceserve，build：vuecliservicebuild｝，
　　4。1、启动服务npmrunserve
　　4。2、main。js内容改变了importVuefromvueimportAppfrom。App。vueVue。config。productionTipfalsenewVue（｛render：hh（App），｝）。mount（app）
　　我们发现之前的el：app丢失了，而后边又多了mount（app）。
　　el：app，是挂载实例的
　　mount（app）功能是一样的，所以替换下与之前的vuecli使用runtimeonly是一致的。
　　运行，打包配置与之前都是差不多，最重要的是vuecli3多了一个图形化界面管理工具，具体看看如何使用。五、图形化界面管理工具
　　使用命令，启动我们的图形化界面管理服务，使用：vueui
　　启动之后，提示我们服务地址为：http：localhost：8000
　　第一次进入之后，没有选择的项目，所以提示我们先导入项目。
　　5。1、启动项目、打包
　　选择一个项目，进行导入之后，界面自动切换
　　选择任务serve点击开始运行，就可以看到项目的具体运行情况，文件大小、包的依赖、运行时间，服务地址等等。
　　build是进行打包的。
　　5。2、项目配置
　　之前修改配置信息的时候，我们需要在代码的配置文件中修改，vuecli3提供的图形化界面管理工具，可以直接在页面上修改配置信息。
　　配置信息分别如下图：
　　特殊说明下：启动运行时编译
　　我们上篇文章介绍Runtimecompiler与Runtimeonly区别，启动运行时编译其实就是选择Runtimeonly模式。
　　5。3、依赖包安装
　　我们选择依赖选项，就会展示项目当前的运行依赖和开发依赖。如图所示：
　　之前我们需要安装依赖的时候，运行命令去安装，如：我们需要安装vuerouter的时候，需要使用命令：npminstallvueroutersavedev
　　但是现在就不需要了，只需要点击安装依赖，搜索vuerouter，选择运行依赖或开发依赖，然后点击安装就可以了，不需要我们记住命令。
　　5。4、安装插件
　　插件与依赖包有些类型，直接点击添加，安装就可以了。
　　图形化界面管理工具使用起来还是很方便的，推荐使用哦！小编今日分享就要介绍了，喜欢的可以点赞关注不迷路，感谢支持！