前後端分離專案，要做前後端聯動測試，沒整過前端用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