摘要：在谷歌找多頁(yè)面，實(shí)例還是比較少，功夫不負(fù)有心人，在那找到了，具體可以到這個(gè)，非常感謝童鞋，今天要講的內(nèi)容是基于童鞋的多頁(yè)面實(shí)例上再優(yōu)化的。有需要一起交流的可以加我的微信，，記得備注技術(shù)交流哈。

目前使用vue來做項(xiàng)目，估計(jì)大部分都是單頁(yè)面（SPA）應(yīng)用，一個(gè)輕型的 MVVM 框架，誰用了MVVM框架，就再也回不去JQ時(shí)代了，哈哈。

在手機(jī)端的項(xiàng)目，使用vue + vue-router是high到爆，不僅僅是我們開發(fā)的而言，最主要的用戶體檢也是開足馬力，體檢感杠杠的。

那問題來了，使用vue+webpack的單頁(yè)面是爽到爆，那如果是多頁(yè)面也能不能high到爆呢？那當(dāng)然呀，必須的必，vue、webpack的忠粉（哈哈，好像這忠粉不關(guān)系到多頁(yè)面的）。

在谷歌找vue 多頁(yè)面，實(shí)例還是比較少，功夫不負(fù)有心人，在yaoyao1987那找到了，具體可以到這個(gè)yaoyao1987 github，非常感謝yaoyao1987童鞋，今天要講的內(nèi)容是基于yaoyao1987童鞋的多頁(yè)面實(shí)例上再優(yōu)化的。

1、demo：http://v.lanchenglv.com/demo/...
2、github：https://github.com/bluefox168...

我們先來講講，具體我們優(yōu)化了什么內(nèi)容。

增加全局統(tǒng)一使用的模塊Lib.js庫(kù)，可能這里看不明白，不要緊，后面會(huì)講到。

支持字體圖標(biāo)

增加干凈的頁(yè)面、組件的模板，復(fù)制即可以使用。

去掉多余的代碼注釋，坑了我的注釋，別再坑人了

構(gòu)建時(shí)，增加對(duì)css打包的支持

提取公共模塊
........

# 安裝
npm install

# 調(diào)試環(huán)境 serve with hot reload at http://localhost:8083/module/login.html
npm run dev

# 生產(chǎn)環(huán)境 build for production with minification
npm run build

本地默認(rèn)訪問端口為8083，需要更改的童鞋請(qǐng)到項(xiàng)目根目錄文件config.js修改。

webpack
 |---build
   |---src
     |---assets 資源
          |---css.css  css
         |---img  圖片文件
         |---font/  字體圖標(biāo)
     |---components 組件
           |---Button.vue  按鈕組件
          |---module-head.vue  head組件
     |---module各個(gè)頁(yè)面模塊
       |---login    登陸模塊
         |---login.html
         |---login.js
         |---app.vue
       |---welcome       歡迎頁(yè)模塊
         |---welcome.html
         |---welcome.js
         |---app.vue

從目錄結(jié)構(gòu)上，各種組件、頁(yè)面模塊、資源等都按類新建了文件夾，方便我們儲(chǔ)存文件。
其實(shí)我們所有的文件，最主要都是放在module文件夾里，以文件夾名為html的名稱。
例如

 |---login    登陸模塊
   |---login.html
   |---login.js
   |---app.vue

就是我們?cè)L問時(shí)的地址：

http://localhost:8083/module/login.html

這里一定要記住，在module里下級(jí)文件夾，一個(gè)文件夾就是一個(gè)html，js、vue template 都統(tǒng)一放在當(dāng)前文件夾里，當(dāng)然你也可以繼續(xù)放其他的資源，例如css、圖片等，webpack會(huì)打包到當(dāng)前頁(yè)面里。
如果項(xiàng)目不需要這個(gè)頁(yè)面了，可以直接把這個(gè)文件夾直接刪除掉，干凈項(xiàng)目，干活也開心。
像以前我們傳統(tǒng)開發(fā)項(xiàng)目，所有的圖片都習(xí)慣放在images里，當(dāng)項(xiàng)目有改動(dòng)時(shí)，有些圖片等資源用不上了，但還占著坑位，雖然現(xiàn)在的硬件容量大到驚人，但我們應(yīng)該還是要養(yǎng)到一個(gè)良好的習(xí)慣。
當(dāng)前頁(yè)面的開發(fā)在app.vue里，打開后你就會(huì)看到很熟悉的