一、環(huán)境搭建

1.1、去官網(wǎng)安裝node.js(http://www.runoob.com/nodejs/nodejs-install-setup.html )

注意node的版本，只有支持和諧模式的node才會(huì)支持es6,在基于webpack構(gòu)建項(xiàng)目名稱(chēng)時(shí)才不會(huì)報(bào)錯(cuò)。推薦最新版本.

下載安裝包之后直接點(diǎn)擊安裝即可。測(cè)試安裝成功的界面如下：

1.2、利用npm安裝webpack命令行語(yǔ)句為npm install webpack -g。測(cè)試安裝成功的界面如下：

1.3、下面就是安裝淘寶鏡像，如下圖：

1.4、接下來(lái)就是全局安裝vue-cli。需要注意的是使用npm安裝vue-cli的時(shí)候時(shí)間很久，可能會(huì)超過(guò)兩個(gè)小時(shí)

安裝語(yǔ)句為：npminstall--globalvue-cli

1.5、創(chuàng)建一個(gè)基于webpack模板的新項(xiàng)目

命令行語(yǔ)句為vue init webpack my-project(其中my-project為文件名稱(chēng),并且文件名只能是小寫(xiě)字母)。在創(chuàng)建模板新項(xiàng)目的時(shí)候需要進(jìn)入到指定的文件夾下面去。

在cmd里輸入vue init webpack my-project (項(xiàng)目文件夾名)，回車(chē)后，等待一小會(huì)兒，依次出現(xiàn)‘git'下的項(xiàng)，可按下圖操作

命令執(zhí)行完成后可以看到在my-project的文件夾下面多了如下的內(nèi)容：

在創(chuàng)建新項(xiàng)目時(shí),如果報(bào)以下錯(cuò)誤,則說(shuō)明node版本過(guò)低，不支持和諧模式（大概就是說(shuō)支持es6,f否則不支持，具體還需大神指教），應(yīng)換成高版本的node。錯(cuò)誤如下圖所示：

5.安裝依賴(lài)

在cmd里 1).輸入：cd my-project（項(xiàng)目名），回車(chē)，進(jìn)入到具體項(xiàng)目文件夾

2).輸入：cnpm install，回車(chē)，等待一小會(huì)兒

該命令執(zhí)行后可能會(huì)出現(xiàn)以下錯(cuò)誤,解決方案如下圖:

回到項(xiàng)目文件夾，會(huì)發(fā)現(xiàn)項(xiàng)目結(jié)構(gòu)里，多了一個(gè)node_modules文件夾（該文件里的內(nèi)容就是之前安裝的依賴(lài)）

基于腳手架創(chuàng)建的默認(rèn)項(xiàng)目結(jié)構(gòu)如下圖所示：

6.webstorm安裝，項(xiàng)目的引入

去官網(wǎng)下載webstrom安裝包進(jìn)行安裝。

一直next,根據(jù)自己電腦系統(tǒng)，選擇安裝64位的系統(tǒng)還是32位的，選中js,css,html àjetbrainsà然后就是install安裝

在webstorm中file下選擇open （選擇你的項(xiàng)目文件夾）

看著很簡(jiǎn)單，我怕過(guò)幾天我操作出錯(cuò)。

7.測(cè)試環(huán)境是否搭建成功

方法1：在cmd里輸入：cnpm rundev

（顯然每次修改代碼，每次去cmd輸入命令是個(gè)很繁瑣的過(guò)程，所以在webstorm中調(diào)出npm菜單。

在package.json文件上點(diǎn)擊右鍵―〉點(diǎn)擊show npm scripts 即可調(diào)出菜單，以后運(yùn)行只需在npm菜單里雙擊dev.

注意在命令行運(yùn)行項(xiàng)目和dev運(yùn)行項(xiàng)目不可一起進(jìn)行，進(jìn)行一個(gè)時(shí)需將另一個(gè)關(guān)閉，否則會(huì)報(bào)端口已被占用的錯(cuò)誤。

）

方法2：在瀏覽里輸入：localhost:8080(默認(rèn)端口為8080)

如果輸入運(yùn)行命令后，報(bào)錯(cuò)。則有兩種情況，如下圖所示：

第一種情況：端口占用問(wèn)題

則解決方案為：

方案1：在進(jìn)程中關(guān)閉該端口。

a.打開(kāi)cmd,輸入命令netstat