[email protected]之使用vue ui建立專案-來自一個戰五渣的體驗
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檔案中