---

一、概述

官網(wǎng)：http://cn.vuejs.org/

vue 有兩個大版本，分別是 vue-2 和 vue-3，目前新項目的話用 vue-3 的會比較多

vue-2 官方文檔：https://v2.cn.vuejs.org/v2/guide/installation.html

vue-3 官方文檔：https://cn.vuejs.org/guide/introduction.html

以下我會分別提供搭建 vue-2 和 vue-3 腳手架的過程。

---

二、前提準備

1. 安裝 node-js

為什么要下載 node-js ？

node 提供了 Javascript 的運行環(huán)境，可以讓 Javascript 運行在服務(wù)端的開發(fā)平臺

node-js 下載：https://nodejs.org/en/download/

一般會選擇在 LTS 下進行下載，因為 LTS 是穩(wěn)定版本的，然后根據(jù)自己電腦的系統(tǒng)選擇安裝，比方說我電腦是 windows-64x 的，那我就點擊 Windows Installer（.msi） > 64-bit 就會開始下載

如果想要下載舊版本可在 Previous Release 中查詢

點擊 Releases 就能跳轉(zhuǎn)到對應(yīng)的下載界面

或者直接在地址上面輸入，點擊 enter 也能獲取

PS：建議 node-js 的版本最好在 16 以上

點擊對應(yīng)的包即可下載完成

下載好安裝程序包之后，只需要雙擊打開即可進行安裝

node 的安裝也是傻瓜式的，一直 next 即可

然后點擊 finsh

檢測 node-js 是否安裝成功，只需要 win + R 調(diào)起 運行命令框，輸入 cmd 打開 cmd窗口，再輸入 node -v 查看 node 的版本，如果有顯示版本信息，就表明 node-js 安裝成功了

npm 是 node-js 的包管理和分發(fā)工具，當安裝完成 node-js 后 npm 也隨之安裝完成，可以通過 npm -v 來校驗是否安裝成功

2. npm 鏡像設(shè)置

在 vue 中經(jīng)常會使用 npm 來安裝一些包，而 npm 的下載鏡像是在國外，所以使用 npm 下載會非常的慢，這里有兩種方式來解決這個問題：

• 方式一：使用 yarn 進行安裝

  使用 yarn 安裝就需要保證當前系統(tǒng)有下載過 yarn，同樣可以在 cmd窗口 中輸入 yarn -v 來檢測是否安裝過 yarn
  
  如果沒有就下載，輸入：npm i -g yarn，下載完成之后仍舊可以輸入 yarn -v 來進行檢測
  

• 方式二：設(shè)置 npm 鏡像為國內(nèi)的
  可以在 cmd窗口 中通過 npm config get registry 命令來查詢 npm 所使用的鏡像
  
  默認使用的鏡像是：https://registry.npmjs.org/，如果你 npm 所使用的鏡像是這個的話，就換成國內(nèi)的，比如：
  （1）https://registry.npm.taobao.org/
  （2）https://registry.npmmirror.com
  比如我使用 https://npmmirror.com/ 所提供的鏡像 https://registry.npmmirror.com
  
  那就可以通過 npm config set registry https://registry.npmmirror.com 這行命令將鏡像設(shè)置為 https://registry.npmmirror.com 即可
  

3. 安裝 vs-code

vue 推薦使用 Visual Studio Code 作為編輯器，如果你之前用的是其它的編輯器進行開發(fā)，建議換成 vs-code

Visual Studio Code 下載：https://code.visualstudio.com/Download

這個安裝就不多做演示了

---

三、腳手架搭建

1. Vue-2 搭建

（一）安裝 vue-cli：

vue-cli 就是 Vue 的腳手架

vue-cli 官方文檔：https://cli.vuejs.org/zh/guide/

可以看到目前 vue-cli 已經(jīng)處于 維護模式 了，但并不影響對它的使用

從官方文檔上可以看到安裝 vue-cli 可以執(zhí)行以下任一命令即可：

npm install -g @vue/cli

或者

yarn global add @vue/cli

例如：在 終端窗口 輸入 npm install -g @vue/cli 進行安裝

可以通過 vue --version 查看是否安裝成功

如果能看到版本信息就表明安裝成功

升級 vue-cli

• 如果是通過 npm install -g @vue/cli 進行安裝的，那么就用 npm update -g @vue/cli 進行升級
• 如果是通過 yarn global add @vue/cli 進行安裝的，那么就用 yarn global upgrade --latest @vue/cli 進行卸載

---

卸載 vue-cli

• 如果是通過 npm install -g @vue/cli 進行安裝的，那么就用 npm uninstall -g @vue/cli 進行卸載
• 如果是通過 yarn global add @vue/cli 進行安裝的，那么就用 yarn global remove @vue/cli 進行卸載

（二）搭建腳手架：

可以建一個空白文件夾來存放項目，在該文件夾下調(diào)出 終端窗口

然后輸入以下命令創(chuàng)建項目

vue create <product-name>

<product-name> 表示創(chuàng)建項目的名稱，值得注意的是 項目名稱不能出現(xiàn)大寫字母，如：myApp

例如：創(chuàng)建一個名為 my-vue2 的項目

輸入 vue create my-vue2 命令，現(xiàn)在默認是創(chuàng)建 vue-3 的腳手架，可以通過 ↑ ↓ 鍵來選擇所需創(chuàng)建 vue 腳手架的版本，這里我就選擇 Default（[Vue 2] bale, eslint）

選擇之后點擊 enter 就會開始自動搭建

到這里 vue-2 的腳手架就已經(jīng)搭建完成了，可以將創(chuàng)建完成的項目在 vs-code 當中打開

新建一個終端，輸入 npm run serve 命令運行項目即可

控制臺輸入以下內(nèi)容，表示成功

可以復(fù)制鏈接到游覽器上查看：http://localhost:8080/

---

1. Vue-3 搭建

方式一：

可以繼續(xù)像 vue-2 搭建腳手架那種方式進行搭建，下載 vue-cli，只不過選擇 Default（[Vue 3] bale, eslint）

其余步驟與 vue-2 搭建腳手架的步驟一樣，就不多做贅述

方式二：

從官方文檔中可知

使用 vue-3 ，node-js 的版本最好是在 16.0 以上

創(chuàng)建 vue-3 的腳手架不需要安裝 vue-cli，只需要輸入以下命令即可：

npm create vue@latest

例如：創(chuàng)建一個名為 my-vue3 的項目

在一個空白的文件夾下調(diào)出 終端窗口

輸入 npm create vue@latest 命令，接著輸入項目名稱 <your project-name> ，然后一直按 enter 直至結(jié)束，就能創(chuàng)建成功

同樣也可以將創(chuàng)建好的項目拖動到 vs-code 中

打卡終端工具，先輸入 npm install 安裝一些必要的包，再 npm run serve 運行即可

可以復(fù)制鏈接到游覽器上查看：http://127.0.0.1:5173/