什麼是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的教學跟一連串的實作,可以多多關注!