一、搭建前端開發環境（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