vue+node+webpack環(huán)境搭建教程

一、環(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)目名稱時(shí)才不會(huì)報(bào)錯(cuò)。推薦最新版本.

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

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

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

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

安裝語句為：npminstall--globalvue-cli

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

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

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

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

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

5.安裝依賴

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

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

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

回到項(xiàng)目文件夾，會(huì)發(fā)現(xiàn)項(xiàng)目結(jié)構(gòu)里，多了一個(gè)node_modules文件夾（該文件里的內(nè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)單，我怕過幾天我操作出錯(cuò)。

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

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

（顯然每次修改代碼，每次去cmd輸入命令是個(gè)很繁瑣的過程，所以在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ò)。則有兩種情況，如下圖所示：

第一種情況：端口占用問題

則解決方案為：

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

a.打開cmd,輸入命令netstat –ano 會(huì)出現(xiàn)所有的端口號(hào)，

b.local address下面是端口號(hào)，PID是占用端口號(hào)的某程序的進(jìn)程號(hào)（記住進(jìn)程號(hào)）

c.打開任務(wù)管理器（ctrl + alt +delete） ,點(diǎn)擊進(jìn)程, 然后點(diǎn)擊查看,選擇“選擇列”,點(diǎn)擊確定后就會(huì)找出占用了端口進(jìn)程程序

d.找出記住的進(jìn)程號(hào)，關(guān)閉

方案2：在config/index.js文件中，修改端口號(hào)。Port：新端口號(hào)。

第二種：npm版本過低，需要升級(jí)：

解決方案：

a.輸入命令：npm install -g npm

b.復(fù)制C:\Users\{你的Windows用戶名}\AppData\Roaming\npm\node_modules\npm下的文件到你的 NodeJS安裝目錄下的 \node_modules\npm 中，覆蓋掉原有的全部文件

（或者用比較苯的方法，重新走一遍之前的步驟）

運(yùn)行起來后的效果如下圖所示：

二、應(yīng)個(gè)人需求會(huì)存在的改變

1、vue.js更改默認(rèn)端口號(hào)8080為指定端口：

執(zhí)行npm run dev實(shí)際是在調(diào)用根目錄下的package.json

打開package.json后可發(fā)現(xiàn)有這樣一段代碼

"scripts":{
"dev":"nodebuild/dev-server.js",
"build":"nodebuild/build.js",
"lint":"eslint--ext.js,.vuesrc"

}

由此可知，我們應(yīng)該查看build目錄下的dev-server.js文件

在dev-server.js文件中可找到

varuri='http://localhost:'+port

此處的port便是我們將要尋找的，在dev-server.js的開始部分我們可以發(fā)現(xiàn)

varpath=require('path')

而path又是從哪里來的呢？

根目錄下有一個(gè)config文件夾，看名字就知道與配置有關(guān)，打開config目錄下的index.js

dev:{
env:require('./dev.env'),
port:8080,
autoOpenBrowser:true,
assetsSubDirectory:'static',
assetsPublicPath:'/',
proxyTable:{},
cssSourceMap:false

}

這里不僅可以改變端口，還可以根據(jù)需要改變其他配置信息。

聲明：本網(wǎng)頁內(nèi)容旨在傳播知識(shí)，若有侵權(quán)等問題請(qǐng)及時(shí)與本網(wǎng)聯(lián)系，我們將在第一時(shí)間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com