vue-cli@3.x之使用vue ui建立項目-來自一個戰五渣的體驗

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