快速開發 Vue.js 工具「Vue CLI」安裝教學

一、介紹

Vue CLI 是由 Vue.js 團隊所開發，用來提供開發者快速建置 Vue.js 專案並整合相關工具鍊工具。

二、安裝

Vue CLI 安裝需透過 npm 或 yarn 套件管理工具來安裝，筆者會一同介紹 node.js 、 yarn 的安裝。

安裝步驟如下

• node.js ( 會一同安裝 npm )
• yarn ( 透過 npm 安裝 )
• vue cli ( 透過 yarn 安裝 )

node.js 安裝

筆者使用環境為 windows 10 、 node.js(14.15.1)，因此筆者會介紹在 windows 10 安裝 v14.15.1，詳細安裝可參考 文章

1. 進入 https://nodejs.org/download/release/v14.15.1/ 依據作業系統選擇不同版本

依照 作業系統 建議選擇

• IOS 選擇 副檔名為 pkg 的檔案
• Windows 選擇 副檔名為 msi 的檔案

依照 CPU 位元 建議選擇

• 64位元 選 x64
• 32位元 選 x86

2. 安裝 node.js (一同安裝 npm)

3. 開起 cmd 下指令 node -v、node -v 檢查是否安裝成功

yarn 安裝

快速安裝套件的管理工具 yarn，詳細參考文章

1. 開起 cmd 下指令，即可安裝 yarn

npm install --global yarn

2. 重開 cmd 下指令 yarn -v 檢查是否安裝成功

vue cli 安裝

安裝好 node.js、npm、yarn 後，就可以安裝 Vue Cli

1. 開起 cmd 下指令，即可安裝 Vue Cli

yarn global add @vue/cli

2. 重開 cmd 下指令 vue --version 檢查是否安裝成功

三、相關連結

1. 「Visual Studio Code」安裝與擴充工具安裝
2. 快速開發 Vue.js 工具「Vue CLI」安裝教學
3. 快速的套件管理工具「Yarn」
4. 讓 JavaScript 能在伺服器端執行的環境 「node.js」
5. 使用「Vue Cli」建立、打包、安裝 專案

四、參考連結

1. 安裝 node.js v14.15.1
2. yarn
3. node.js
4. vue cli