强大的脚手架：vue-cli 3.x UI控制台初体验-白红宇

众所周知，vue的官方脚手架是vue-cli，但它已经很久没有大版本更新了，原来是憋了个大招。最近发布的vue-cli 3.x ，虽然还是bata版本，但它新增的功能是非常强大的，小编已经迫不及待的下载体验。

一、安装

npm install -g @vue/cli

ps：墙内的朋友们可以使用cnpm， mac的朋友们记得加上sudo

二、启动服务

注意，vue-cli 3.x已经收归到vue项目下了，所以，直接输入 vue -h 可以看到：

6eb2f4688d3967cdb1c8038a46b5f748e971012d

此时我们运行命令

vue ui

, 就会启动一个本地服务,界面是长这样子滴：

11dee7a37207595b2411241bbb33d83448a57531

可以看到，这简直就是一个控制台,界面ui也很舒服。

三、创建项目

点击创建项目会进来这么一个界面：

填写项目名

选择包管理器

选择初始化git仓库

3add7aeea48f0a27906851f8e51c33563aa90e1d

下一步之后会让你选择创建模式：

4b26ea6a3d4a23ed23cecb3668bac9878611afa8

我们选择手动，此时会让我们选择需要使用的库和插件，比如bebel、vuex、vue-router 等常用的库

0cb7c1886c06db47813e15527831162d6b9f392e

接下来会让我们进入到插件的具体配置，比如：

a49367c6c87dc3c6d43da53953cba1fcc5f98bdf

配置完成后点创建项目，此时会弹出：

4697e79adfaac168946914808bfffb811077728b

这是让你保存本次的配置，下次创建项目可以直接使用保存的这套配置。

456a327bab444dd73447f721485238a66a7bfbc5

7f7e791fe33d38e8d5a871f23f7f69d8ea8d995a

此时可以看到控制台正在下载项目所需要的库，跟使用 vue create 命令做的事情一样，只是把操作可视化了。

四、管理项目

经过上面都步骤，项目创建完成，你可以看到下面这个管理页

18f2a43a2e8ab8db33c11828207e1681b61cc3fe

我们来介绍一下这三个菜单：

插件：可以从插件商店下载安装各种网上都插件

0c6af2896e68f11d8a67a3105bf23b04fcdd8641

配置：对已安装对插件配置管理

028a79c35bc379b832a30c597b88c8afc43010a5

任务：就是各种可运行的命令，如打包、本地调试。

f1d52d2e6ffe738303423ba74ff44d6bd1d10da7

运行

serve

任务，我们可以看到，我们新建的项目已经跑起来了：

2f93b3f1e73dfd045148b2b74483d77c0c5bd14b

此时我们输入

localhost:8080

就可以看到：

2adbb099427f9cea322c377e1e8ca98cb808bde6

另外，我们还可以在这里看到对项目打包文件对分析：

06315c70e0a188d2d99bdd28effc6cb087daae74

五、其他功能

1、导入项目：可以导入本地的项目进控制台管理

4cbfa7432167040e7a9f13da01ba81b4d21ed658

2、管理项目：列出已有的项目，此时已经可以看到刚刚新建的项目。

bb762ce538f5048a0895baeaa7b66d33e0e27701

3、目录结构通过cli 3.x 新建的项目的结构较之前简单，只有 public 和 src 两个文件夹

fe344ae6222a2ecfdf04d664688696274ccb9110

4、自定义配置：

此时很多朋友会问了，没有配置文件，那我需要自定义一个配置咋办呢？

莫慌，此时我们只需要在项目根目录新建一个

vue.config.js

文件就能使用自定义配置了

module.exports = {  baseUrl: process.env.NODE_ENV === 'production'    ? '/production-sub-path/'    : '/',  devServer: {    port: 8000  }}

更多详细配置

六、体会

本次升级我认为最牛逼之处在于建设了一个属于vue的资源生态圈，把能使用的资源收归起来管理，控制台的ui不仅非常舒服，功能也十分强大，方便那些刚入门的同学，可以很快的搭起一个自己的vue项目。同时对于平时的开发也可以做到很好的辅助。哈哈哈，吹了一波，这东西目前还不是release版本，可以持续关注一下。附上官方地址

原文发布时间为：2018年06月26日

原文作者：掘金