1. 全局安裝vue cli 2. 初始化 vue ui 執行命令 2.1 該命令會自動打開你的瀏覽器，預設地址為: localhost:8000/project/select ,瀏覽器展示的頁面如下： 切換界面到創建,點擊下麵 在此創建新項目按鈕 2.2 2.3 上面的兩項不用管，是我之前創建過玩 ...
1. 全局安裝vue-cli
yarn global add @vue/cli
// 檢查安裝是否成功
vue -V
// 3.2.22. 初始化 vue ui
執行命令
vue ui2.1
該命令會自動打開你的瀏覽器，預設地址為: localhost:8000/project/select,瀏覽器展示的頁面如下：
切換界面到創建,點擊下麵在此創建新項目按鈕
1. 輸入項目文件夾名稱
2. 包管理器，如果你已經安裝了yarn，vue ui的預設包管理器是yarn2.2
2.3
上面的兩項不用管，是我之前創建過玩的。可能你打開不是這樣的，只有預設，手動和遠程預設這三項。這裡選擇手動，下一步。
2.4
接下來，你會被要求配置預裝選項，根據你自己項目需求勾選即可。一般來說，Babel,Router,Vuex,Linter這四項是必裝的，另外我還勾選了下使用配置文件，可能有的人看不慣項目生成很多的.babelrc 這樣單獨的配置文件，也可以不勾，這樣的話會統一到package.json中去配置
2.5
第一個是問你router的mode要不要設成history模式，一般正式項目都會設成這種模式的
第二個問你選用哪種Eslint風格，從[email protected]似乎就是standard選的多一些。
第三個是表示當你保存/提交時自動做Lint
接下來會彈窗問你要不要保存為新預設，如果保存的話以後創建項目就可以像2.3中的那種圖一樣直接選擇預設創建項目了
3.與[email protected]的不同之處
這篇博文感覺都有點寫不下去了- -，因為我使用vue ui整個創建項目過程實在過於簡單，都是中文版的，直接介紹一下我認為的幾個亮點吧。
3.1 關於插件與預設
以前[email protected]是只提供6種預設模板供大家下載使用，如果想要自己高度自定義，比如你想基於typescritp去做項目，只能去fork官方模板，然後自己修改它，基本上沒有生態圈可言。而現在[email protected]很多特性都是基於插件來靈活擴展的，會有很多大佬去開發各種各樣的插件體系，相當於一個插件就可以是一種模板了，比如你在插件面板中可以搜一下elementUI,安裝它的話就可以直接幫你生成一套整個基於elementUI的模板了。下載了就能用，基本上零配置。這是因為
- 每個插件都可以對項目文件操作
- 每個插件都可以對項目中已有的webpack配置進行操作
- 每個插件都可以對項目中註入一些script命令，比如serve,build之類的，還可以往一些鉤子上註入一些想要執行的事件，比如install之後要做什麼
- 每個插件都可以引入其他插件
以前每次創建一個新項目，都需要自己手動去安裝各種依賴什麼的，然後又一頓配置改改改。而有了預設之後，下次創建項目的時候都出現在選項列表裡，只要勾選了就可以創建一個和之前一樣配置和依賴的項目。
（此章節暫時對於我這個戰5渣顯得太過高深，大家自行去瞭解更好）
3.2 關於依賴
以前安裝插件，需要在vscode編輯器的命令行里執行 yarn add axios 等依賴，
現在可以直接去vue ui 的依賴面板中點右上角的添加依賴，來搜索你想要安裝的依賴直接安裝。
3.3 關於項目配置
[email protected]可以讓vue ui的界面上直接通過勾選還是不勾選來決定開啟還是關閉某些功能(我估計是官方實在是看不慣[email protected]中一群人瞎改它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
相比於[email protected]也簡潔了很多，沒有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文件中
