資訊專欄INFORMATION COLUMN
摘要：在谷歌找多頁面，實例還是比較少，功夫不負有心人，在那找到了，具體可以到這個，非常感謝童鞋，今天要講的內(nèi)容是基于童鞋的多頁面實例上再優(yōu)化的。有需要一起交流的可以加我的微信，，記得備注技術(shù)交流哈。
vue+webpack是否有多頁面
目前使用vue來做項目，估計大部分都是單頁面（SPA）應用，一個輕型的 MVVM 框架，誰用了MVVM框架，就再也回不去JQ時代了，哈哈。
在手機端的項目，使用vue + vue-router是high到爆，不僅僅是我們開發(fā)的而言，最主要的用戶體檢也是開足馬力，體檢感杠杠的。
那問題來了，使用vue+webpack的單頁面是爽到爆，那如果是多頁面也能不能high到爆呢？那當然呀，必須的必，vue、webpack的忠粉（哈哈，好像這忠粉不關(guān)系到多頁面的）。
在谷歌找vue 多頁面，實例還是比較少，功夫不負有心人，在yaoyao1987那找到了，具體可以到這個yaoyao1987 github，非常感謝yaoyao1987童鞋，今天要講的內(nèi)容是基于yaoyao1987童鞋的多頁面實例上再優(yōu)化的。
優(yōu)化了點啥 demo、github地址1、demo：http://v.lanchenglv.com/demo/...
2、github：https://github.com/bluefox168...
我們先來講講，具體我們優(yōu)化了什么內(nèi)容。
增加全局統(tǒng)一使用的模塊Lib.js庫，可能這里看不明白，不要緊，后面會講到。
支持字體圖標
增加干凈的頁面、組件的模板，復制即可以使用。
去掉多余的代碼注釋，坑了我的注釋，別再坑人了
構(gòu)建時，增加對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
本地默認訪問端口為8083，需要更改的童鞋請到項目根目錄文件config.js修改。
目錄結(jié)構(gòu)webpack
|---build
|---src
|---assets 資源
|---css.css css
|---img 圖片文件
|---font/ 字體圖標
|---components 組件
|---Button.vue 按鈕組件
|---module-head.vue head組件
|---module各個頁面模塊
|---login 登陸模塊
|---login.html
|---login.js
|---app.vue
|---welcome 歡迎頁模塊
|---welcome.html
|---welcome.js
|---app.vue
從目錄結(jié)構(gòu)上，各種組件、頁面模塊、資源等都按類新建了文件夾，方便我們儲存文件。
其實我們所有的文件，最主要都是放在module文件夾里，以文件夾名為html的名稱。
例如
|---login 登陸模塊 |---login.html |---login.js |---app.vue
就是我們訪問時的地址：
http://localhost:8083/module/login.html
這里一定要記住，在module里下級文件夾，一個文件夾就是一個html，js、vue template 都統(tǒng)一放在當前文件夾里，當然你也可以繼續(xù)放其他的資源，例如css、圖片等，webpack會打包到當前頁面里。
如果項目不需要這個頁面了，可以直接把這個文件夾直接刪除掉，干凈項目，干活也開心。
像以前我們傳統(tǒng)開發(fā)項目，所有的圖片都習慣放在images里，當項目有改動時，有些圖片等資源用不上了，但還占著坑位，雖然現(xiàn)在的硬件容量大到驚人，但我們應該還是要養(yǎng)到一個良好的習慣。
當前頁面的開發(fā)在app.vue里，打開后你就會看到很熟悉的、
>
這里就是我想講的關(guān)于優(yōu)化的第一點提到的全局模塊庫。
當然也有童鞋問呀，會不會每個頁面都會把這些全局模塊庫都打包在當前頁面，那JS文件體積大到驚人。
哎呀，你當webpack是二貨的呀，webpack會自動幫你處理好的，會把在*.vue里的import Lib from "assets/Lib.js"的庫自動提取出來，放到一個全局的JS文件里，這就是自動構(gòu)造的神奇呀，省心省電，媽媽再也不用擔心我做重復的工作了。
在Lib.js里，我們也看到有兩個導入的JS文件，主要來做什么的呢？
為了更好的在全局調(diào)用模塊里，知道哪個模塊的作用是什么，另外在寫代碼時更能快速查找到JS文件，我區(qū)分了配置文件和共用事件文件，即conf、common，下面說下具體的用途。
# 儲存站點的配置，例如web的名稱、LOGO地址等 import C from "assets/conf"; # 導入全局的共用事件，例如在微信的JS SDK初始化，每個頁面都要分享，都需要初始化的，一次調(diào)用，全局使用，棒??！ import M from "assets/common";
當然，你也可以不像這樣區(qū)分不同的JS文件，刪除也沒有影響的，具體也要看項目的需要而定，不能死讀書。
另外，如果想要干凈的頁面模塊模板，可以到根目錄的tpl里復制module_tpl整個文件夾，然后粘貼到src/module目錄下馬上就可以進行開發(fā)了，開發(fā)之前記得在cmd里npm run dev跑一遍，新增頁面都要重新dev一遍。
module我們就講到這里，下面我們來講講組件的調(diào)用，最愛組件了。
組件的使用組件（Component）是 vue.js 最強大的功能之一，當你發(fā)現(xiàn)使用組件可以減少造輪子里，你會深深的愛上它。
我們的組件都是放在components目錄下的，調(diào)用組件的方法也很簡單。
import Button from "components/Button";
然后記得在*.vue注冊導入的組件，要不然會影響使用。
import Button from "components/Button";
export default {
data() {
return {
}
},
components: {
# 在這里注冊組件，不注冊組件的話，是無法使用的。
Button
}
}
如果想要干凈的組件模板，可以到根目錄的tpl里找到components_tpl的Hello.vue文件，復制粘貼到components目錄下馬上就可以進行開發(fā)了。
圖標字體在yaoyao1987童鞋里，是沒有打包構(gòu)造圖標字體的代碼邏輯，這也是我優(yōu)化上去的一部分，建議使用iconfont圖標（http://www.iconfont.cn） ，強大到無所不能，可以到iconfont下載自己想要的圖標字體，記得是把文件放到srcassetsfont文件夾里。
webpack會自動打包的，無需理會，另外還有一點，iconfont提供的css文件，復制到srcassetscss.css文件即可，要不然沒有效果哈。
在*.vue里使用調(diào)用就行了。
!構(gòu)建代碼說明
那我們使用的是vue-cli的手腳架，用過vue+cli的朋友知道主要構(gòu)建代碼都放在根目錄build下，vue多頁面主要修改了這三個JS文件webpack.base.conf.js、webpack.dev.conf.js、webpack.prod.conf.js
# 【webpack.base.conf.js】主要是構(gòu)建的全局設(shè)置，主要是增加了以下代碼，已經(jīng)增加在JS文件里，這里只是做一個補充說明，具體請看`build/webpack.base.conf.js`。
var entries = getEntry("./src/module/**/*.js"); // 獲得入口js文件
var chunks = Object.keys(entries);
plugins: [
// 提取公共模塊
new webpack.optimize.CommonsChunkPlugin({
name: "vendors", // 公共模塊的名稱
chunks: chunks, // chunks是需要提取的模塊
minChunks: chunks.length
}),
// 配置提取出的樣式文件
new ExtractTextPlugin("css/[name].css")
]
function getEntry(globPath) {
var entries = {},
basename, tmp, pathname;
glob.sync(globPath).forEach(function (entry) {
basename = path.basename(entry, path.extname(entry));
tmp = entry.split("/").splice(-3);
pathname = tmp.splice(0, 1) + "/" + basename; // 正確輸出js和html的路徑
entries[pathname] = entry;
});
return entries;
}
這里還要做一個特別說明，我們每次更新資源文件，為了去緩存，都會給文件生成hash值，例如：
這兩者都是為了去緩存，唯一的區(qū)別的生成的文件名不一樣，有些項目，為了可以能出嚴重BUG時第一時間回滾，以文件名+hash的方式儲存，每次生成都不會覆蓋之前的代碼，以方便查BUG或者回滾。
另一種方式，就是以文件名+?hash的方式儲存，每次都會覆蓋之前生成的資源，方便在某些特殊項目使用。
我在webpack.base.conf.js也已經(jīng)注釋說明了。
module.exports = {
entry: entries,
output: {
path: config.build.assetsRoot,
publicPath: config.build.assetsPublicPath,
/* ---- 生成的例子 vendors.61714a310523a3df9869.js --- */
//filename: "[name].[hash].js"
/* ---- 生成的例子 vendors.js?f3aaf25de220e214f84e --- */
filename: "[name].js"
}
}
結(jié)束言
不知不覺時間又過去，啰嗦一堆堆的，每個項目需求都不一樣，配置也會有許不同，也希望更多的朋友分享自己的代碼和想法出來哈，也可以一起交流。
有需要一起交流的可以加我的微信，amwhuang，記得備注技術(shù)交流哈。
首發(fā)博客地址：http://lanchenglv.com/article...
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/80225.html
摘要：前段時間項目組計劃快速開發(fā)一個新的項目，開發(fā)那邊提供殼子和部分系統(tǒng)級功能，所有的頁面由完成，考慮兼容性安卓及。后面會繼續(xù)優(yōu)化，先把目前的基本部署方式記錄下來。 前段時間項目組計劃快速開發(fā)一個新的App項目，App開發(fā)那邊提供殼子和部分系統(tǒng)級功能，所有的頁面由h5完成，考慮兼容性安卓4.1及ios7.1。全新的項目，沒有歷史包袱，就嘗試了新的開發(fā)模式，采用了webpack + vue-c...
摘要：作為目前最熱門最具前景的前端框架之一，其提供了一種幫助我們快速構(gòu)建并開發(fā)前端項目的新的思維模式。的新版本，的簡稱。的包管理工具，用于同一管理我們前端項目中需要用到的包插件工具命令等，便于開發(fā)和維護。 Vue.js作為目前最熱門最具前景的前端框架之一，其提供了一種幫助我們快速構(gòu)建并開發(fā)前端項目的新的思維模式。本文旨在幫助大家認識Vue.js，了解Vue.js的開發(fā)流程，并進一步理解如何通...
摘要：五六月份推薦集合查看最新的請點擊集前端最近很火的框架資源定時更新，歡迎一下。蘇幕遮燎沈香宋周邦彥燎沈香，消溽暑。鳥雀呼晴，侵曉窺檐語。葉上初陽乾宿雨，水面清圓，一一風荷舉。家住吳門，久作長安旅。五月漁郎相憶否。小楫輕舟，夢入芙蓉浦。 五、六月份推薦集合 查看github最新的Vue weekly；請::點擊::集web前端最近很火的vue2框架資源；定時更新，歡迎 Star 一下。 蘇...
摘要：五六月份推薦集合查看最新的請點擊集前端最近很火的框架資源定時更新，歡迎一下。蘇幕遮燎沈香宋周邦彥燎沈香，消溽暑。鳥雀呼晴，侵曉窺檐語。葉上初陽乾宿雨，水面清圓，一一風荷舉。家住吳門，久作長安旅。五月漁郎相憶否。小楫輕舟，夢入芙蓉浦。 五、六月份推薦集合 查看github最新的Vue weekly；請::點擊::集web前端最近很火的vue2框架資源；定時更新，歡迎 Star 一下。 蘇...
閱讀 1460·2021-11-22 13:54
閱讀 4382·2021-09-22 15:56
閱讀 1835·2021-09-03 10:30
閱讀 1331·2021-09-03 10:30
閱讀 2097·2019-08-30 15:55
閱讀 1865·2019-08-30 14:13
閱讀 2071·2019-08-29 15:19
閱讀 2376·2019-08-28 18:13
