全棧的自我修養: 6使用vue ui進行vue.js環境搭建
It is only with the heart that one can see rightly. What is essential is invisible to the eye.
用心才能看得清事物的本質，真正重要的東西是肉眼看不見的。
當你看到這篇文章的時候，暫且認為你對如何做一個網站有了興趣.
前言
上幾篇文章曾經講過使用 vue-cli 和新版本的 @vue/cli 通過命令的方式建立專案和一些常用的配置，但直接用手動點一下建立專案她不香嗎!?
這也是我們第一個前後端示例專案的開始
Phil Karlton 曾說“在 CS 領域中，有兩件事是非常難的，一個是快取失效，一個是命名。”
這裡隨便起個名字吧，這個專案就叫 kola 了，做一個簡單的許可權管理系統吧
安裝@vue/cli
這裡還是要安裝 @vue/cli, 如果已經安裝了請忽略
epimetheus$ npm install -g @vue/cli
安裝速度還是比較慢的，大家可以喝杯水
安裝完成後可以 vue --version 看下版本號
epimetheus$ vue --version
@vue/cli 4.4.6
建立 Vue 專案
在終端輸入命令
$ vue ui
? Starting GUI...
? Ready on http://localhost:8000
這裡選擇建立, 然後建立一個新專案
這裡先選擇預設，畢竟我不會配呀
建立可能需要等一會
在這裡我們可以通過自定義，新增一些其他展示項
這裡我們點選外掛，新增一下 vue-route, vuex
通過 +新增外掛，通過搜尋選擇一些外掛進行安裝，這裡安裝下 element 外掛, 選擇預設配置直接安裝即可
同樣的方式安裝下 axios 外掛
然後我們看看專案能否執行起來
在任務裡面我們可以看到 serve、build、lint 和 inspect
點執行，即會執行我們的專案了，成功後點啟動專案就能看見我們的專案
如果編譯失敗了，可以在配置中先將
ESLint configuration中 儲存時檢查 先關閉
這樣就暫時大功告成了
專案結構
通過 vscode 開啟這個專案，發現多了 plugins 目錄，這裡面放了外掛的預設配置，檢視 main.js, 可以看出 vue-router、store、elementui 和 axios 已經進行了預設配置，是不是比我們手動配置香了了呢，她香了
git
參考
- @vue/cli : https://cli.vuejs.org/zh/guide/
