什麼是Vue-CLI
Vue-CLI是Vue的命令行工具，可以快速開發大型單頁應用程式 (SPA)，只要照著步驟，就可以很懶人的設定好webpack等常常用在前端的開發工具，煩人的配置瞬間搞定！
安裝
Vue CLI 需要 Node.js 8.9 或更高版本 (推薦 8.11.0+)，可以使用n來管理Node版本
透過npm全局安裝
npm install -g @vue/cli或是yarn來安裝
yarn global add @vue/cli確認是否安裝成功
vue --version建立專案
- 透過命令來建立專案
vue create <your-project-name>2. 初始設定
可以選擇預設的設定，就會一步直接開始建構
或是可以自己手動選擇需要的工具
接著就一步一步設定自選的工具 (Manually select feactures)，以下是我常使用的設定
選擇要安裝的工具 (用space選擇)
- Babel：可以把ES6翻譯成其他版本的Javascript(如ES5)，做到JS的向下兼容
- Router：Vue-Router是設定前端路由很方便的工具
- Vuex：狀態管理工具，可以集中管理Vue.js中所有組件的狀態
- CSS Pre-processors：安裝css預處理器，讓Vue可以讀懂css
- Linter/Formatter：檢查代碼是否正確的工具
Vue-Router的模式
這裡我們選擇history模式 (另一種為hash模式，會在url前面加上”#”)
CSS的預處理器
選擇Sass/SCSS讓環境可以讀懂sass/scss。
而dart-sass跟node-sass的區別，只是一種是用dart語言去編譯或是用node去編譯的，dart的運行速度比node快速，所以這裡我們選dart-sass的版本
使用ESLint讓程式碼更規範、統一風格
若只是簡單應用可以選擇 ESLint with Error prevention only
若想要嚴格規範程式碼可以選擇 ESLint+Standard config
程式碼檢查時機
這裡我們選保存時檢查程式碼
在哪裡進行Babel, PostCSS, ESLint等的配置
是否保存上述配置
最後按下”Enter”之後，就會開始建構專案了！
總結一下所有配置
運行專案
移動到剛剛建立好的專案底下，接著執行專案
cd <your-project>npm run serve
看到Welcome就成功建立Vue的SPA應用了！
後續會有更多關於Vue的教學跟一連串的實作，可以多多關注！
