windows下vue項目啓動步驟

 

windows下vue項目啓動步驟

版權聲明：本文爲博主原創文章，未經博主容許不得轉載。

原創，轉載請標註引用地址，謝謝~

 

先後端分離項目，要作先後端聯動測試，沒整過前端用vue, nodejs和webpack的開發管理方式。來回折騰終於把已經建好的vue項目啓動起來，作個筆記記錄下步驟備用，只針對沒有任何前端項目啓動經驗的，可能對別人沒有參考意義：

 

os：windows7

 

（1）git clone已建的vue項目（強迫症患者非要寫，廢話）

（2）裝好nodejs，最新版本6.10以上的好像都能自動配置路徑和npm啥的，反正裝好後在任意路徑下用cmd查"node --version"或者"npm -v"都能給出版本號，不用像一些其餘教程同樣還要配置環境變量。我的偏好者另說。vue是依賴nodejs的環境的。

（3）切換npm鏡像：在任意路徑下用cmd輸入「npm install -g cnpm --registry=https://registry.npm.taobao.org」 這樣就能用淘寶的npm鏡像代替國外的資源，懶得用代理同窗的福音。之後就能夠用cnpm命令來所有代替npm。不設置代理的話，在後續項目的npm install的時候，容易由於超時而失敗。有教程把這條命令的「--registry」寫成只有一個「-」，注意是兩個「--」。

（4）npm全局安裝vue：仍舊在任意路徑的cmd下輸入「cnpm install vue-cli -g」，安裝vue。成功後輸入vue能出來信息。

（5）npm項目依賴組件安裝：cmd進入前端vue項目的根目錄，輸入命令「cnpm install」，會根據前端項目的依賴關係下載好相關的組件，存在項目目錄的node_modules文件夾下。通常git庫會gitignore依賴組件，也就是沒有node_modules文件夾，否則太大了... 這步容易發生err，碰見了就要打回去重弄，不要掩耳盜鈴，具體錯誤排查stackoverflow...。

（6）npm編譯：第一次運行前，要對項目進行編譯，cmd進入前端vue項目的根目錄，輸入命令「npm run build」，此時會對根目錄下的package.json對build命令的定義進行編譯，通常"build" = "webpack -p"。

（7）配置nginx：先後端分離項目通常都要解決跨域問題，上nginx吧，配好nginx安裝目錄/conf/nginx.conf的server模塊。nginx的配置不詳述。好像如今nodejs也能直接代理，可是若是用windows的同窗，好像windows的nodejs不支持process.argv[...]，nginx歡迎你迴歸（話說nginx在windows下表現也不太穩定，常常好好地項目又不行了，此時無論三七二十一首先重啓nginx！）

（8）配置項目主機地址：前端項目裏須要有個config文件夾，裏面要有host.js或者config.js文件，定義nginx轉域後的主機地址+端口號（也就是nginx.conf裏面server模塊的server_name值+listen的端口號）。git項目拉下來沒有的話本身加一個，文件內容範例（下面用${}表示nginx.conf裏面server模塊對應的字段值）：

const host = 'http://${server_name}:${listen}/server/';
export {host};

（9）配置windows的HOSTS：因爲是在本機上啓用前端項目，須要將127.0.0.1和nginx代理後的域名作對應。找到系統的HOSTS文件（win7系統下在C:\Windows\System32\drivers\etc裏面），增長一條「127.0.0.1 ${server_name}」。不然本地啓動前端項目後瀏覽器訪問nginx代理後的域名會發生dns錯誤。

（10）啓動nginx

（11）啓動項目：cmd進入 前端vue項目的根目錄，輸入命令「npm run dev」，此時會用nodejs啓動這個前端的vue項目。大功告成。

 

一個比較典型的用webpack管理的vue項目應該有以下文件和文件夾：

config/：定義代理的域名

dist/: 整個前端項目用webpack打包後的目標存放文件夾，裏面通常有bundle.js文件

lib/: 開發時引用的一些依賴文件，最經典的就是jquery

node_modules/：上面介紹的用npm對項目依賴組件進行安裝時就放在這個文件夾裏。

src/：本身寫的源代碼

index.html：主頁入口文件

package.json和webpack.config.js：這兩個文件應該是組件依賴關係和管理打包的配置文件？不太懂，反正沒有是不能cnpm install、cnpm run build、cnpm run dev的。

 

第一次配置好後，之後啓動只用兩步：

（1）啓動nginx

（2）進入前端項目根目錄，cmd運行npm run dev