上一篇文章《前端开发3年了，竟然不知道什么是 Vue 脚手架？（上）》介绍了什么是脚手架，以及Vue-cli 2.x如何创建项目，创建的项目结构。这篇文章介绍 Vue-cli 3.x 如何构建项目？
一、Vue-cli 2 与 Vue-cli 3的区别- vue-cli 3 是基于 webpack 4 打造的，vue-cli 2 还是 webpack 3。
- vue-cli 3 的设计原则是 “0配置”，移除 build 和 config 等配置目录。
- vue-cli 3 提供了 vue ui 命令，提供可视化配置，更加人性化。
- vuc-cli 3 移除 static 文件夹，新增 public 文件夹，index.httml 移入了 public 文件夹。
接下来看看，vue-cli 3 是如何创建项目的，以及可视化配置是怎么样的？
二、Vue CLI 3.x 初始化项目2.1、新建项目文件夹，打开命令行
vue create learn
运行以上命令，创建文件名为learn的vue项目。
运行命令如下图：
方框内提示我们发现有可用新版本脚手架，可以运行下边命令进行更新。
下边有三个选项，分别为：
- Please pick a preset:(Use arrow keys) - 请选择一个已配置的关键字选项
- default (babel,eslint) - 默认的，选babel和eslint包
- Manually select features - 手动选择需要的特性
2.2、选择最后一个手动配置
选择之后，如上图。最前边的括号内有个绿色星号，表示被选中，我们可以使用上下箭头进行切换，点击空格进行选中和取消。
根据需要，选择完成之后，点击回车继续向下。
2.3、选择配置文件类型
In dedicated config files - 独立配置文件
In package.json - 配置信息放入 package.json文件
选择 独立配置文件之后，继续向下。
2.4、是否保存本次创建项目特性作为配置项？
提示后携带(y/n)，输入y表示确定保存配置，n表示取消保存。
我们选择 y 保存之后，以后创建项目就不需要选择这么多了，一键就可以生成项目。
紧接着需要配置键值，下次我们可以通过键值就能看到，比如设置一个前端人的简写：qdr。回车之后项目就开始创建了。
2.5、如何查看之前保存的配置选项，如果不需要了我们如何删除呢？
再次创建项目的时候，第一个选项就多了一项，如图：
第一个 “qdr” 是我们上次创建项目保存的配置信息。如果我们不想要了，或者保存的多了之后，把不常用的就需要删除掉，可以进入：C/user/Administrator 查找 .vuerc 文件。
rc = run command,vuerc也就是vue的运行命令，它的内容如下：
{
"useTaobaoRegistry": true,
"presets": {
"qdr": {
"useConfigFiles": true,
"plugins": {
"@vue/cli-plugin-babel": {}
}
}
},
"latestVersion": "4.5.13",
"lastChecked": 1630908642473
}
我们只需要删除 presets 中，不想要的配置项就好了，再运行命令，命令中就没有了。
如此，我们的vue-cli 3的项目就创建完成了。
三、Vue-cli 3 项目结构介绍对新建的项目结构截图，如下图：
它们的文件以及对应的意义如下：
- node_modules - 项目需要用的node包
- public - 相当于static 文件夹，原样输出
- src - 开发资源
- .browserslistrc - 浏览器相关配置
- .gitignore - 设置提交 git 的忽略信息
- babel.config.js - 对 babel 配置信息
- package-lock.json - 记录依赖包的真实版本
- package.json - 配置文件
- README.md - 使用介绍
打开 package.json 文件，查找 scripts 内运行脚本，我们发现 server 。
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build"
},
4.1、启动服务
npm run serve
4.2、main.js 内容改变了
import Vue from 'vue'
import App from './App.vue'
Vue.config.productionTip = false
new Vue({
render: h => h(App),
}).$mount('#app')
我们发现之前的 el:'#app' 丢失了，而后边又多了 $mount("#app")。
el: "#app" , 是挂载实例的
$mount("#app") 功能是一样的，所以替换下与之前的vue-cli使用runtime-only是一致的。
运行，打包配置与之前都是差不多，最重要的是vue-cli 3多了一个图形化界面管理工具，具体看看如何使用。
五、图形化界面管理工具使用命令，启动我们的图形化界面管理服务，使用：
vue ui
启动之后，提示我们服务地址为：http://localhost:8000/
第一次进入之后，没有选择的项目，所以提示我们先导入项目。
5.1、启动项目、打包
选择一个项目，进行导入之后，界面自动切换
选择任务 -> serve -> 点击开始运行，就可以看到项目的具体运行情况，文件大小、包的依赖、运行时间，服务地址等等。
build 是进行打包的。
5.2、项目配置
之前修改配置信息的时候，我们需要在代码的配置文件中修改，vue-cli 3提供的图形化界面管理工具，可以直接在页面上修改配置信息。
配置信息分别如下图：
特殊说明下：启动运行时编译
我们上篇文章介绍 Runtime compiler 与 Runtime-only区别，启动运行时编译 其实就是选择Runtime-only 模式。
5.3、依赖包安装
我们选择依赖选项，就会展示项目当前的运行依赖和开发依赖。如图所示：
之前我们需要安装依赖的时候，运行命令去安装，如：我们需要安装vue-router的时候，需要使用命令：
npm install vue-router --save-dev
但是现在就不需要了，只需要点击 “安装依赖”，搜索 vue-router，选择运行依赖或开发依赖，然后点击安装就可以了，不需要我们记住命令。
5.4、安装插件
插件与依赖包有些类型，直接点击添加，安装就可以了。
图形化界面管理工具使用起来还是很方便的，推荐使用哦！小编今日分享就要介绍了，喜欢的可以点赞关注不迷路，感谢支持！
,
