[2] Vue: getting started
閱讀時間約 4 分鐘
前言
Vue 在過去的一兩年內快速發展，寫法也一直改變，我在過去一年多也更改了兩次寫法，在這個系列中我將以最新的 composition api + typescript 寫法進行教學。
javascript 有兩大痛點，一個是異步問題，另一個是弱型別。要渲染畫面一定要多線程同時異步處理，不然真的一個元件出來再跑下一個會慢到爆炸，所以第一個問題無解。不過至少 typescript 強調了型別的概念，解決了 javascript 其中一個痛點。
Installation
prerequest
pnpm
npm 和 pnpm 都是 javascript 的 package manager，javascript 裝套件是 by 專案，如果你有多個專案都需要同樣的套件，那每個專案都要裝一次，比較佔電腦的空間，所以後來有了 pnpm ，去避免在電腦重複裝相同的套件，如果你在不同的專案需要用到相同的套件，透過 pnpm 來裝，會在你的專案給你一個連結指向這個套件去避免重複裝相同的套件。
因為用太新的 pnpm 當 Vue CLI 的 package manager 建立 Vue 專案目前有 bug，所以我們裝第 6 版的 pnpm
npm install -g pnpm@6
Vue CLI
來裝 Vue 的開發工具 -- Vue CLI
pnpm install -g @vue/cli
查看當前版本的 Vue CLI，確定有裝好。
vue --versioncreate project
先換一下 Vue CLI 的 package manager
vue config --set packageManager pnpm開始建立專案吧
vue create front_end
- Pick a preset
這裡我們選擇 Manually select features，去裝好一定會需要用到的套件， 如果選擇 Default，會裝的太簡略，很多很重要的套件像是 vue-router, vuex 都要之後自己再裝。 上下鍵是切換選項，空白鍵是確定選擇，按下 Enter 做下一步設定。
2. Select the features
這裡 Choose Vue version, Babel 要選，本篇以 typescript 開發，所以 Typescript 要選， Router, Vuex 和 CSS Pre-processors 也是非常重要，必選，之後的篇章會再詳細介紹。
3.
class 風格的裝飾器，像原本創建 vue 實例 長得像這樣 home = new Vue() 用裝飾器後會像這樣 class home extends Vue{} 我自己是看不習慣啦，所以不裝。
Use history mode for router 選 no 的話，路由會掛在 # 底下，很醜
原生 CSS 其實不好用，用 CSS 預處理器，樣式好寫很多， 連迴圈, function 都能寫，目前 Sass/Scss 最多人用，Stylus 也蠻好用的， Less 好像有些雷的地方，我自己主要是用 Sass/Scss。
4. Where do you prefer placing config for Babel, ESLint, etc.?
像 babel, eslint 這些套件的設定檔，你想各別存放還是統一寫在 package.json 裡。
5. Save this as a preset for future projects?
之後的專案是否都套用現在的設定？
貼心提醒: 如果你有用 dropbox, google drive 等雲端硬碟在備份的話建議先暫停備份， javascript 有一個黑洞叫做 node_modules，讓我形容一下有多黑
請不要備份 node_modules，專案需要的套件都會記錄在 package.json 或 pnpm-lock.yaml 裡， 之後在別的電腦想裝回這些套件，只要在終端輸入 npm install 或 pnpm install 就可以裝回來了。
如果用 pnpm 當 Vue CLI 的 package mannager 還是有問題，那就換回 npm 吧
進入專案路徑，在終端輸入 npm run serve 就可以把專案跑起來了
然後打開瀏覽器輸入 http://localhost:8080/ 或 http://192.168.50.37:8080/ 就可以看到畫面了。
為什麼會看到廣告
9會員
49內容數
比起詳細教學單一技能，網路上或者市面上整合多項技能的教學相對少很多，但要真的完成一項專案往往不是只靠一項技能便能做到。
而且教科書式的完整教學也比較枯燥乏味，因此我想以自身的經驗為例，以全端開發各項技能中最常用到的部分進行講解，讓讀者能夠快速上手掌握全端技能。
留言0
查看全部
你可能也想看
Google News 追蹤
徵的就是你 🫵 超ㄅㄧㄤˋ 獎品搭配超瞎趴的四大主題，等你踹共啦！還有機會獲得經典的「偉士牌樂高」喔！馬上來參加本次的活動吧！
隨著理財資訊的普及，越來越多台灣人不再將資產侷限於台股，而是將視野拓展到國際市場。特別是美國市場，其豐富的理財選擇，讓不少人開始思考將資金配置於海外市場的可能性。
然而，要參與美國市場並不只是盲目跟隨標的這麼簡單，而是需要策略和方式，尤其對新手而言，除了選股以外還會遇到語言、開戶流程、Ap
如何在 Vite 專案中安裝和設置 TypeScript 及路徑別名的步驟，包括安裝必要的依賴、配置 vite.config.js、tsconfig.json 的設置，及如何創建類型聲明文件來正確識別 .vue 文件。
各位使用 Vue.js 開發的小夥伴們，你們都怎麼實作父子層組件資料的雙向綁定呢？如果你還在寫 prop + emit 的話，不妨進來看看吧。
※ 補充說明：
※ npm 常用指令：
◦ npm init–y：快速初始化一個新的 Node.js 並建立一個 package.json 文件的命令。
◦ npm info 套件名稱 version：快速查詢指定 npm 套件的最新版本號。
◦ npm install套件名稱：用來安裝
套件（Package）是將程式或程式庫進行組織、分發和共享的一種方式。在軟體開發中，套件通常包含了相關的程式碼、資源文件和元數據，並提供了統一的名稱空間和版本管理。
Vue.js是一種基於MVVM的前端JavaScript框架，類似的框架有React、Angular等。
架設環境
安裝Visual Studio Code(https://code.visualstudio.com/)
安裝Node.js(https://nodejs.org/en/
Vue Router 及 具名視圖，擺脫以往切換依賴 CSS display:none 跟 display:block 互相配合，有時還得搭配 z-index 來調整層級跟 opacity 透明度的麻煩，而 Vue Router 完美的解決了這棘手的問題，且能客製頁面想要呈現的擺飾。
NPM 全稱為 ( Node Package Manager )，直接翻譯就是 "node套件管理器" ，是 Node.js 預設的，當下載 Node.js 時也會一並下載到本機端並安裝，而 Node.js 則是能讓 JavaScript 語法實現在後端伺服器運行的一種環境，可謂是前端開發的好朋友。
Vite 是由 Vue 開發者 Evan You 所開發出來，用來加快、優化程式碼打包的工具，在這裡我們不免會需要提到大部分前端開發者可能都會聽過、使用過的前端工具：Webpack。
在那之前，我們先來聊聊為什麼前端會需要所謂的打包工具呢？
Vue 是尤雨溪所開發的一個前端框架，Vue 提供了響應式數據綁定和組件化的開發模式，能方便開發者構建出具有良好交互性的前端應用。而 Vite 則是一個前端構建工具，用途是提供更快的開發體驗。然後，本文將介紹如何使用 Vite 建立一個 Vue 專案的開發環境，這是你學習 Vue 的第一步。
徵的就是你 🫵 超ㄅㄧㄤˋ 獎品搭配超瞎趴的四大主題，等你踹共啦！還有機會獲得經典的「偉士牌樂高」喔！馬上來參加本次的活動吧！
隨著理財資訊的普及，越來越多台灣人不再將資產侷限於台股，而是將視野拓展到國際市場。特別是美國市場，其豐富的理財選擇，讓不少人開始思考將資金配置於海外市場的可能性。
然而，要參與美國市場並不只是盲目跟隨標的這麼簡單，而是需要策略和方式，尤其對新手而言，除了選股以外還會遇到語言、開戶流程、Ap
如何在 Vite 專案中安裝和設置 TypeScript 及路徑別名的步驟，包括安裝必要的依賴、配置 vite.config.js、tsconfig.json 的設置，及如何創建類型聲明文件來正確識別 .vue 文件。
各位使用 Vue.js 開發的小夥伴們，你們都怎麼實作父子層組件資料的雙向綁定呢？如果你還在寫 prop + emit 的話，不妨進來看看吧。
※ 補充說明：
※ npm 常用指令：
◦ npm init–y：快速初始化一個新的 Node.js 並建立一個 package.json 文件的命令。
◦ npm info 套件名稱 version：快速查詢指定 npm 套件的最新版本號。
◦ npm install套件名稱：用來安裝
套件（Package）是將程式或程式庫進行組織、分發和共享的一種方式。在軟體開發中，套件通常包含了相關的程式碼、資源文件和元數據，並提供了統一的名稱空間和版本管理。
Vue.js是一種基於MVVM的前端JavaScript框架，類似的框架有React、Angular等。
架設環境
安裝Visual Studio Code(https://code.visualstudio.com/)
安裝Node.js(https://nodejs.org/en/
Vue Router 及 具名視圖，擺脫以往切換依賴 CSS display:none 跟 display:block 互相配合，有時還得搭配 z-index 來調整層級跟 opacity 透明度的麻煩，而 Vue Router 完美的解決了這棘手的問題，且能客製頁面想要呈現的擺飾。
NPM 全稱為 ( Node Package Manager )，直接翻譯就是 "node套件管理器" ，是 Node.js 預設的，當下載 Node.js 時也會一並下載到本機端並安裝，而 Node.js 則是能讓 JavaScript 語法實現在後端伺服器運行的一種環境，可謂是前端開發的好朋友。
Vite 是由 Vue 開發者 Evan You 所開發出來，用來加快、優化程式碼打包的工具，在這裡我們不免會需要提到大部分前端開發者可能都會聽過、使用過的前端工具：Webpack。
在那之前，我們先來聊聊為什麼前端會需要所謂的打包工具呢？
Vue 是尤雨溪所開發的一個前端框架，Vue 提供了響應式數據綁定和組件化的開發模式，能方便開發者構建出具有良好交互性的前端應用。而 Vite 則是一個前端構建工具，用途是提供更快的開發體驗。然後，本文將介紹如何使用 Vite 建立一個 Vue 專案的開發環境，這是你學習 Vue 的第一步。