許久未曾更新文章，雖然不是程序員但還是忘懷不了擼碼的覺悟.

1.VUE環境搭建

1. 安裝node.js (項目開發前準備) Node.js官網：https://nodejs.org/en/ 進入Node.js官網，選擇下載并安裝Node.js。安裝過程只需要點擊“下一步”即可，非常簡單。 node.js安裝完成后： 驗證Node.js是否安裝好，在windows下，win+r召喚出運行窗口，輸入cmd打開命令行窗口。(任意路徑的cmd下)輸入node -v即可得到對應的Node.js版本。 npm包管理器是集成在Node.js中了，所以在安裝Node.js的時候就已經自帶了npm。

npm -g install npm復制代碼

npm install -g cnpm -registry=https://registry.npm.taobao.org復制代碼

 cnpm install -g vue-cli 復制代碼

vue init webpack my-vue-project復制代碼

 cnpm install 復制代碼

npm run build復制代碼

npm run dev復制代碼

localhost:8080復制代碼

2.VUE調試工具vue-devtools的安裝與使用

1. 配置nginx：前后端分離項目一般都要解決跨域問題，配好nginx安裝目錄/conf/nginx.conf的server模塊
   
2. 配置項目主機地址：前端項目里需要有個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};復制代碼

3. 配置windows的HOSTS：由于是在本機上啟用前端項目，需要將127.0.0.1和nginx代理后的域名做對應。找到系統的HOSTS文件（win7系統下在C:\Windows\System32\drivers\etc里面），增加一條“127.0.0.1 ${server_name}”。否則本地啟動前端項目后瀏覽器訪問nginx代理后的域名會發生dns錯誤。
   
4. 第一次配置好后，以后啟動只用兩步：

   啟動nginx 
   進入前端項目根目錄，cmd運行npm run dev復制代碼

config/：定義代理的域名dist
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的。復制代碼

4.開發環境

運行

npm run dev復制代碼

?webpack配置文件為：

webpack.dev.conf.js復制代碼

?瀏覽器自動刷新：

將webpack.dev.conf.js中的 hot設置為 false復制代碼