初心者教學:使用Vue CLI 打造Vue App 前端應用服務 | 什麼 是 Vue CLI
以往要寫玩具都是用Python來寫,週末在玩雙點醫院的過程中,突然想要寫一個訓練色彩辨別的互動玩具(可能是雙點醫院褪色症的啟發)。同時不想再用jQueryDOM操作的方式來寫,但想到對於前端各種工具的熟悉度非常有限,如果要從環境開始準備,並且規劃整個開發流程可能會讓整個專案裹足不前😑此時想到VisualStudioIDE所帶來的良好開發體驗,何不嘗試以VueCLI的方式建構整個專案,而不要從開發環境開始琢磨,讓時間集中在功能的實踐,忽略環境的細節並且在需要的時候才去搜尋,於是就開始了打造第一個VueApp的過程✈️說明本次使用的是VueCL...
以往要寫玩具都是用 Python 來寫,週末在玩雙點醫院的過程中,突然想要寫一個訓練色彩辨別的互動玩具(可能是雙點醫院褪色症的啟發)。同時不想再用 jQuery DOM 操作的方式來寫,但想到對於前端各種工具的熟悉度非常有限,如果要從環境開始準備,並且規劃整個開發流程可能會讓整個專案裹足不前 😑
此時想到 Visual Studio IDE 所帶來的良好開發體驗,何不嘗試以 Vue CLI 的方式建構整個專案,而不要從開發環境開始琢磨,讓時間集中在功能的實踐,忽略環境的細節並且在需要的時候才去搜尋,於是就開始了打造第一個 Vue App 的過程 ✈️
說明本次使用的是 Vue CLI 4.5.13,開發過程無包袱也無懸念的選擇 Vue 3.x,但選擇之後才發現 3.x 不再支援印象中好用的功能 filter,但影響不大有非常多的替代方式。而用關鍵字 Vue CLI 可以找到 Kuro Hsu大大的 重新認識 Vue.js[1],對於曾經隨興翻讀 Vue.js 文件並且參加過 Vue.js 線下課程卻沒有實際動手過的作者而言,確實是重新認識 Vue.js 😅
這本電子書是實體書 重新認識 Vue.js:008天絕對看不完的 Vue.js 3 指南[2] 的電子版,提供了實體書前四個章節,包含 Vue.js基礎入門、元件系統、單一元件檔與 Vue CLI 以及 Vue Router。Vuex 以及 Vue Composition API 的部分必須要購買實體書才能夠閱讀。但電子版的內容就豐富到,簡直是佛心來的,同時前四章的內容對於要打造本次的專案已經是綽綽有餘的參考內容。
環境準備再決定要使用 Vue CLI 進行開發後,只要確認已經安裝 Node.js,本次開發的環境使用的是 node.js v12.2.0,另有安裝 nvm 可以視情況安裝其他 node.js 版本。
node -v接著就可以使用 npm 下列指令進行安裝 Vue CLI
npm install -g @vue/cli完成後接著使用開始建立專案,過程中會引導環境設置,這邊也不深入各功能的用途,選擇必要的功能即可,查詢...