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