一、搭建前端開發環境（Vue+element)

1.Visual Studio Code

下載地址：https://code.visualstudio.com/

更多VS Code教程可以參考以下資料：

官網文檔：https://code.visualstudio.com/docs

簡書教程:https://www.jianshu.com/p/990b19834896

2.Node JS

安裝NodeJS：http://nodejs.cn/download/

把Node添加到系統環境變量里面，打開cmd命令行，輸入npm -v，顯示版本就成功了。

如果你安裝的是舊版本的npm，可以很容易地通過npm命令來升級：

# linux系統命令
sudo npm install npm -g
# windows 系統命令
npm install npm –g

更多NodeJS教程可以參考一下資料：

中文官網：http://nodejs.cn/api/

菜鳥學堂：https://www.runoob.com/nodejs/nodejs-tutorial.html

3.淘寶鏡像

安裝淘寶鏡像，安裝成功后用cnpm替代npm命令即可。

npm install -g cnpm --registry=https://registry.npm.taobao.org

4.安裝Yarn

Yarn是Facebook發布的node.js包管理器，比npm更快更高效，可以使用Yarn替代npm。

npm i yarn -g -verbose

配置淘寶鏡像：

yarn config set registry https://registry.npm.taobao.org

配置node-sass 的二進制包鏡像地址：

yarn config set sass_binary_site http://cdn.npm.taobao.org/dist/node-sass -g

yarn的具體使用可參考：https://blog.csdn.net/idomyway/article/details/88411836

還有yarn命令中-dev親測無效，要改為-d。

5.安裝webpack

安裝打包工具webpack：

npm install webpack -g

更多

webpack教程可以參考以下資料：

菜鳥學堂：http://www.runoob.com/w2cnote/webpack-tutorial.html

全局安裝后直接在cmd輸入webpack -v，即可查看webpack版本。

6.安裝vue-cli

安裝 vue腳手架項目初始化工具vue-cli:

npm install vue-cli –g

vue-cli可視化創建項目流程：

可參考：https://www.baidu.com/link?url=foYJ1HnXI3NEBItAIg51_RGMRD6vzZRNqndSmtiJielN68ghlHjYBM1KmYAk0Oxs9bOlcLZjVAbKMlouuUAndK&wd=&eqid=af9268890003796a000000055e73175d

7.創建項目

環境已經搭建完成，現在我們通過vue-cli來生成一個項目：

vue init webpack 項目名

安裝過程有這些提示：

Install vue-router?y
Use ESLint to lint your code? (Y/n) n
Set up unit tests (Y/n)n
Setup e2e tests with Nightwatch? (Y/n)n

ESLint在Vue中的使用詳解：可參考：https://blog.csdn.net/IT_HLM/article/details/78776630

setup e2e tests with nightwacth的使用，可參考：https://blog.csdn.net/fangfangtulk/article/details/89290074

8.安裝依賴

安裝依賴要在項目本身的根目錄里安裝，即cd進項目目錄。

9.啟動運行

npm run dev