vue-cli@3.x之使用vue ui创建项目-来自一个战五渣的体验

1. 全局安装vue-cli

yarn global add @vue/cli
// 检查安装是否成功
vue -V
// 3.2.2

2. 初始化 vue ui

执行命令

vue ui

2.1

该命令会自动打开你的浏览器，默认地址为: localhost:8000/project/select,浏览器展示的页面如下：

切换界面到创建,点击下面在此创建新项目按钮

1. 输入项目文件夹名称
2. 包管理器，如果你已经安装了yarn，vue ui的默认包管理器是yarn

2.2

2.3

上面的两项不用管，是我之前创建过玩的。可能你打开不是这样的，只有默认，手动和远程预设这三项。这里选择手动，下一步。

2.4

接下来，你会被要求配置预装选项，根据你自己项目需求勾选即可。一般来说，Babel,Router,Vuex,Linter这四项是必装的，另外我还勾选了下使用配置文件，可能有的人看不惯项目生成很多的.babelrc 这样单独的配置文件，也可以不勾，这样的话会统一到package.json中去配置

2.5

第一个是问你router的mode要不要设成history模式，一般正式项目都会设成这种模式的

第二个问你选用哪种Eslint风格，从vue-cli@2.x似乎就是standard选的多一些。

第三个是表示当你保存/提交时自动做Lint

接下来会弹窗问你要不要保存为新预设，如果保存的话以后创建项目就可以像2.3中的那种图一样直接选择预设创建项目了

3.与vue-cli@2.x的不同之处

这篇博文感觉都有点写不下去了- -，因为我使用vue ui整个创建项目过程实在过于简单，都是中文版的，直接介绍一下我认为的几个亮点吧。

3.1 关于插件与预设

以前vue-cli@2.x是只提供6种默认模板供大家下载使用，如果想要自己高度自定义，比如你想基于typescritp去做项目，只能去fork官方模板，然后自己修改它，基本上没有生态圈可言。而现在vue-cli@3.x很多特性都是基于插件来灵活扩展的，会有很多大佬去开发各种各样的插件体系，相当于一个插件就可以是一种模板了，比如你在插件面板中可以搜一下elementUI,安装它的话就可以直接帮你生成一套整个基于elementUI的模板了。下载了就能用，基本上零配置。这是因为

• 每个插件都可以对项目文件操作
• 每个插件都可以对项目中已有的webpack配置进行操作
• 每个插件都可以对项目中注入一些script命令，比如serve,build之类的，还可以往一些钩子上注入一些想要执行的事件，比如install之后要做什么
• 每个插件都可以引入其他插件

以前每次创建一个新项目，都需要自己手动去安装各种依赖什么的，然后又一顿配置改改改。而有了预设之后，下次创建项目的时候都出现在选项列表里，只要勾选了就可以创建一个和之前一样配置和依赖的项目。

（此章节暂时对于我这个战5渣显得太过高深，大家自行去了解更好）

3.2 关于依赖

以前安装插件，需要在vscode编辑器的命令行里执行 yarn add axios 等依赖，

现在可以直接去vue ui 的依赖面板中点右上角的添加依赖，来搜索你想要安装的依赖直接安装。

3.3 关于项目配置

vue-cli@3.x可以让vue ui的界面上直接通过勾选还是不勾选来决定开启还是关闭某些功能(我估计是官方实在是看不惯vue-cli@2.x中一群人瞎改它build目录里的配置然后玩崩了之后去github提各种乱七八糟的issue了，哈哈哈)，这种图形化界面的操作方式无疑对我这种战无渣更友好了...再也不用去记一些乱七八糟的命令，百度各种不怎么靠谱的解决方式。

3.4 关于vue ui的任务面板

这个让我感觉特神奇的就是，再也不用在我的编辑器里去执行yarn dev 或者npm run dev了，敲个业务代码还得特意留四分之一的窗口去看它命令行有没有报错...它可以直接在一个网页里跑起来我的项目，还有各种报告生成（虽然我现在很多功能也看不太懂，但是很酷炫有木有）。

同样也可以直接在vue ui界面上去执行run build。查看各种数据，比如打包后的大小等

3.5 关于生成的项目文件夹

.
├── public
│   ├── favicon.ico
│   └── index.html
├── src
│   ├── assets
│   │   └── logo.png
│   ├── components
│   │   └── HelloWorld.vue
│   ├── views
│   │   ├── About.vue
│   │   └── Home.vue
│   ├── App.vue
│   ├── main.js
│   ├── router.js
│   └── store.js
├── .browserslistrc
├── .editorconfig
├── .eslintrc.js
├── .gitignore
├── README.md
├── babel.config.js
├── package.json
├── postcss.config.js
└── yarn.lock

相比于vue-cli@2.x也简洁了很多，没有build和config目录。

后期遇到坑点应该会记录一下。

番外篇：

另外介绍下mac系统中这种树文件是如何生成的

// 1. 安装brew
/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
// 2. 利用brew安装tree
brew install tree
// 3. 列出文件树
tree -a  -I "node_modules|.git|.vscode" --dirsfirst >a.md
// -a表示列出所有文件,这样可以列出来 .eslintrc.js 这样的以.开头的隐藏文件
// -I "node_modules|.git|.vscode" 这样表示忽略这三个文件夹
// --dirsfirst 表示以文件夹优先排序
// >a.md  表示输出到 a.md文件中