1、安裝node.js環境

根據需求下載32位或64位安裝包-node.js官網去下

https://nodejs.org/en/

檢視是否安裝成功

cmd -》

node -v          檢視node

npm -v           檢視npm

顯示node和npm的版本號則安裝成功

2、安裝vue\vue-cli

#全域性安裝 vue-cli腳手架

npm intall --global vue-cli

安裝成功結果如下

檢視vue是否安裝完成：vue --version

3、建立webpack專案-cmd下輸入

#建立一個基於webpack模板的新專案

vue init webpack my-project          (my-project是建立的專案名)

安裝過程中會有一些配置資訊需要選擇

Project name 輸入專案名稱

Project description 描述

Install vue-router?   可以輸入Y確定也可以後期再安裝，隨意選擇

Use ESLint to lint your code? 這是做程式碼檢測的，用來統一風格，現在我們的專案裡都有用它，根據需求確定要不要用它，Y/N

除了以上幾個其它有Y/N提示的都輸入N沒有的直接回車

安裝成功如下圖：

#安裝依賴

cd my-project

npm install

#執行專案

npm run dev

執行成功如下圖：

此時可開啟瀏覽器輸入http://localhost:8080

成功即可看到如下頁面

以上則成功建立一個vue+webpack的專案

前端開發工具推薦：webstorm或VS code

以下是專案裡可能用到的外掛：

1、安裝路由（如果建立時選擇了Y則不用再次安裝）

npm install vue-router --save-dev

2、安裝axios跨域請求（代替ajax進行資料請求）

npm install axios

3、vuex（狀態管理---用來處理共享資料）

npm install vuex --save

4、babel- polyfill（es6語法回退，用來相容IE的）

npm install --save-dev babel-polyfill

5、element（目前專案採用的前端框架）

npm i element-ui -S

6、echarts（做圖表，折線圖柱狀圖餅圖）

npm install echarts --save

7、clean-webpack-plugin（清除dist資料夾中重複的檔案，打包時使用）

npm install --save-dev clean-webpack-plugin

8、專案打包

npm run build