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文件中