圖文實例詳解vue、node、webpack環境搭建教學課程

本文主要為大家詳細介紹了vue+node+webpack環境搭建教程，具有一定的參考價值，有興趣的朋友們可以參考一下，希望能幫助到大家更好地去搭建vue、node、webpack環境。

一、環境搭建

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

注意node的版本，只有支援和諧模式的node才會支援es6,在基於webpack建構專案名稱時才不會報錯。推薦最新版本.

下載安裝包之後直接點選安裝即可。測試安裝成功的介面如下：

1.2、利用npm安裝webpack命令列語句為npm install webpack -g。測試安裝成功的介面如下：

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

##1.4、接下來就是全域安裝vue-cli。要注意的是使用npm安裝vue-cli的時候時間很久，可能會超過兩個小時

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

1.5、建立一個基於webpack模板的新項目

命令列語句為vue init webpack my-project(其中my-project為檔案名稱,且檔案名稱只能是小寫字母)。在建立範本新專案的時候需要進入到指定的資料夾下面去。

在cmd裡輸入vue init webpack my-project (項目資料夾名稱)，回車後，等待一小會兒，依序出現'git'下的項，可按圖操作

指令執行完成後可以看到在my-project的資料夾下面多瞭如下的內容：

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

5.安裝依賴

在cmd裡1).輸入：cd my-project（專案名稱），回車，進入到具體項目資料夾

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

該命令執行後可能會出現以下錯誤,解決方案如下圖:

回到專案資料夾，會發現專案結構裡，多了一個node_modules資料夾（該檔案裡的內容就是先前安裝的依賴）

基於腳手架創建的預設專案結構如下圖所示：

6.webstorm安裝，專案的引入

去官網下載webstrom安裝包進行安裝。

一直next,根據自己電腦系統，選擇安裝64位元的系統還是32位元的，選取js,css,html àjetbrainsà然後就是install安裝

在webstorm中file下選擇open （選擇你的專案資料夾）

看著很簡單，我怕過幾天我操作出錯。

7.測試環境是否搭建成功

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

（顯然每次修改程式碼，每次去cmd輸入指令是個很繁瑣的過程，所以在webstorm中調出npm選單。

注意在命令列運行項目和dev運行項目不可一起進行，進行一個時需將另一個關閉，否則會報到端口已被佔用的錯誤。 ##方法2：在瀏覽內輸入：localhost:8080(預設連接埠為8080)

如果輸入執行指令後，報錯。則有兩種情況，如下圖所示：

第一種情況：連接埠佔用問題

則解決方案為：

#方案1：在進程中關閉該連接埠。

a.打開cmd,輸入命令netstat –ano 會出現所有的連接埠號，

b.local address下面是連接埠號，PID是佔用連接埠號碼的某程式的進程號（記住進程號）

c.打開任務管理器（ctrl + alt +delete） ,點擊進程, 然後點擊查看,選擇「選擇列」,點擊確定後就會找出佔用了端口進程程序

d.找出記住的進程號，關閉

方案2：在config/index.js檔案中，修改連接埠號碼。 Port：新連接埠號碼。

第二種：npm版本過低，需要升級：

#解：

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

b.複製C:\Users\{你的Windows使用者名稱}\AppData\Roaming\npm\node_modules\npm下的檔案到你的NodeJS安裝目錄下的\node_modules\npm 中，覆寫原有的全部檔案

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

運行起來後的效果如下圖所示：

二、應個人需求會存在的改變

1、vue.js變更預設連接埠號碼8080為指定連接埠：

執行npm run dev實際上是在呼叫根目錄下的package.json

打開package.json後可發現有這樣一段程式碼

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

}

由此可知，我們應該查看build目錄下的dev-server.js檔案

在dev-server.js檔案中可找到

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

此處的port便是我們將要尋找的，在dev-server.js的開始部分我們可以發現

varpath=require('path')

而path又是從哪裡來的呢？

根目錄下有一個config資料夾，看名字就知道與配置有關，打開config目錄下的index.js

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

}

這裡不僅可以改變端口，還可以根據需要改變其他配置資訊。

相關推薦：

實例詳解vue環境建構簡單教學

最清晰的PHP服務端環境建構的圖文教學

Lamp環境建置Linux CentOS6.5編譯安裝mysql5.6的具體詳解