一、安裝node環(huán)境

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

2、檢查是否安裝成功：如果輸出版本號(hào)，說(shuō)明我們安裝node環(huán)境成功

圖片1.png

3、為了提高我們的效率，可以使用淘寶的鏡像：http://npm.taobao.org/
輸入：npm install -g cnpm –registry=https://registry.npm.taobao.org，即可安裝npm鏡像，以后再用到npm的地方直接用cnpm來(lái)代替就好了。

圖片2.png

檢查是否安裝成功：

圖片3.png

二、搭建vue項(xiàng)目環(huán)境

1、全局安裝vue-cli

npm install --global vue-cli

圖片4.png

2、進(jìn)入你的項(xiàng)目目錄，創(chuàng)建一個(gè)基于 webpack 模板的新項(xiàng)目: vue init webpack 項(xiàng)目名

圖片5.png

說(shuō)明：

Vue build ==> 打包方式，回車即可；

Install vue-router ==> 是否要安裝 vue-router，項(xiàng)目中肯定要使用到 所以Y 回車；

Use ESLint to lint your code ==> 是否需要 js 語(yǔ)法檢測(cè) 目前我們不需要 所以 n 回車；

Set up unit tests ==> 是否安裝 單元測(cè)試工具 目前我們不需要 所以 n 回車；

Setup e2e tests with Nightwatch ==> 是否需要 端到端測(cè)試工具 目前我們不需要 所以 n 回車；

3、進(jìn)入項(xiàng)目：cd vue-demo，安裝依賴

圖片6.png

安裝成功后，項(xiàng)目文件夾中會(huì)多出一個(gè)目錄：　node_modules

圖片7.png

4、npm run dev，啟動(dòng)項(xiàng)目

項(xiàng)目啟動(dòng)成功：

圖片8.png