一、環境準備
1、安裝 node.js

下載地址：https://nodejs.org/en/

2、檢查是否安裝成功：輸出版本號說明安裝成功

二、搭建 vue 環境
1、全域性安裝腳手架 vue-cli

在命令列輸入：

npm install vue-cli -g （vue-lcli2)
npm install -g @vue/cli (vue-cli3）

2、檢查是否安裝成功：輸出版本號說明安裝成功

三、建立 vue 專案的三種方法
1、方法一：webpack 建立專案，vue init webpack 專案名（vue-cli2.x的初始化方式​​​​​​​​​​​​​​）

以管理員身份開啟命令列介面 (按住 shift 滑鼠右鍵 開啟 PowerShell)，輸入命令：

全域性安裝 webpack：npm install webpack -g (vue2需要安裝這個）

vue init webpack blog （blog 是專案名）建立專案

如果沒有選擇初始化專案，需要進入專案目錄，輸入 npm install 初始化

輸入 npm run dev 執行專案

專案建立成功

2、方法二：vue-cli3建立專案​​​​​​​，vue create 專案名 （vue-cli3.x的初始化方式）

以管理員身份開啟命令列介面 (按住 shift 滑鼠右鍵 開啟 PowerShell)，輸入命令：

vue create system（ system 是專案名）建立專案

進入專案目錄，輸入 npm install 初始化

輸入 npm run dev 執行專案

專案建立成功

3、方法三：基於圖形化介面的方式建立 vue 專案 （vue ui）（vue-cli3.x）

@vue/cli3.0 增加一個視覺化專案管理工具，全域性安裝完成 cli3.0 之後，可以直接在 cmd 輸入命令：vue ui 啟動即可，地址預設是 localhost:8000 ( 回車後開啟 )

可以通過匯入你的 vue 專案進行管理，也可以通過建立按鈕進行視覺化建立一個新的vue專案。

建立完

還可以檢視執行依賴和開發依賴的以及線上安裝和更新依賴，非常方便

任務按鈕下，你可以執行專案、打包專案，檢查等操作。

四、使用 webpack 建立 vue 專案和 vue-cli3 建立專案的區別

1、vue-cli3 移除了配置檔案目錄：config 和 build 資料夾，增加了vue.config.js檔案，移除了 static 靜態資料夾，新增了 public 資料夾並將 index.html 移動到 public 中。

2、vue-cli2 在 config 中的 dev.env.js 和 prod.env.js 中分別配置域名，vue-cli3 在 vue.config.js 中配置域名 vue-cli2 在 config 中的 index.js 中配置跨域，vue-cli3 在 vue.config.js中配置跨域

3、vue-cli3 內部封裝了 webpack 且做了很多適合 vue 專案的優化，可以用 vue.config.js 來管 理專案，vue-cli2 更加適合有特殊需求的，畢竟是原生的，但管理起來複雜，一般來說， vue-cli3 夠用了，但是 vue-cli3 能實現的，vue-cli2 一定能實現，vue-cli2 可以實現的 vue-cli3 不一定能實現。