3-1 Vue CLI 介紹 | vue version
(opensnewwindow)[1]前面兩個章節的主題我們主要都圍繞在Vue.js的基本核心功能,但隨著前端領域的不斷發展,Vue.js與前端領域的開發生態圈也越來越完整,當專案的規模越來越大,直接透過CDN引入Vue.js與
(opens new window)[1]
前面兩個章節的主題我們主要都圍繞在 Vue.js 的基本核心功能,但隨著前端領域的不斷發展, Vue.js 與前端領域的開發生態圈也越來越完整,當專案的規模越來越大,直接透過 CDN 引入 Vue.js 與 <script> 開了就寫的方式, 顯然已經無法滿足現代的前端開發,同時也使得程式碼的維護日漸困難。
像是 CSS 預處理器 (pre-processor) 常見的就有 sass、less、stylus 等,而 JavaScript 的轉譯也有像 Babel、TypeScript 等工具/語言來負責處理,更不用說像是 ESLint、Webpack、Gulp、Mocha、Chai...等各種令人眼花撩亂的前端開發工具了。
如果說在開發之前,我們得先一個一個去糾結那些工具、環境的安裝與配置,那麼不管是對新手還是熟練開發者來說,都會是一個很大的門檻與負擔。
而本章節要為讀者們介紹的 Vue CLI 就是為了解決此問題而生。
注意
實際執行與環境設定可能會因版本差異而有所不同,請確保您的執行環境與本書範例採用 @vue/cli 4.5.10 相同版本。
Vue CLI 是什麼Vue CLI(opens new window)[2],全名是 Vue.js Command-Line Interface,目前 (2021/01) 最新的穩定版本為 @vue/cli 4.5.10。
Vue CLI 是由 Vue.js 核心團隊所開發,用來提供開發者快速建置 Vue.js 專案並整合相關工具鍊的一套指令列 (command-line) 工具。它的特色是提供開發者在短短的幾分鐘時間內,即可快速建置一個立即可用的 Vue.js (含 2.x/3.x) 示範專案,這個專案同時也內建了 Hot-Reload、ES Lint 與 dev-Server 等功能。
Vue CLI 整合了 webpack 和 webpack-dev-server,讓開發者可以快速建置一套立即可用的開發環境, 同時,也可以依開發者需要與其他 Plugin...