vue-cli 3.0 UI控制台初体验

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

1、安装

npm install -g @vue/cli

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

2、启动服务

注意，vue-cli 3.x已经收归到vue项目下了，因此，直接输入 vue -h 能够看到：

此时咱们运行命令 vue ui , 就会启动一个本地服务,界面是长这样子滴：

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

3、建立项目

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

1. 填写项目名
2. 选择包管理器
3. 选择初始化git仓库

下一步以后会让你选择建立模式：

咱们选择手动，此时会让咱们选择须要使用的库和插件，好比bebel、vuex、vue-router 等经常使用的库

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

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

这是让你保存本次的配置，下次建立项目能够直接使用保存的这套配置。

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

4、管理项目

通过上面都步骤，项目建立完成，你能够看到下面这个管理页

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

• 插件：能够从插件商店下载安装各类网上都插件

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

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

运行 serve 任务，咱们能够看到，咱们新建的项目已经跑起来了：

此时咱们输入 localhost:8080 就能够看到：

另外，咱们还能够在这里看到对项目打包文件对分析：

5、其余功能

一、导入项目：
能够导入本地的项目进控制台管理

二、管理项目：
列出已有的项目，此时已经能够看到刚刚新建的项目。

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

四、 自定义配置：
此时不少朋友会问了，没有配置文件，那我须要自定义一个配置咋办呢？
莫慌，此时咱们只须要在项目根目录新建一个 vue.config.js 文件就能使用自定义配置了

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

更多详细配置看这里

6、 体会

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