詳解vue-cli + webpack 多頁面實(shí)例配置優(yōu)化方法
本文介紹了vue-cli + webpack 多頁面實(shí)例配置優(yōu)化方法,分享給大家
vue+webpack是否有多頁面
目前使用vue來做項(xiàng)目,估計(jì)大部分都是單頁面(SPA)應(yīng)用,一個(gè)輕型的 MVVM 框架,誰用了MVVM框架,就再也回不去JQ時(shí)代了,哈哈。
在手機(jī)端的項(xiàng)目,使用vue + vue-router是high到爆,不僅僅是我們開發(fā)的而言,最主要的用戶體檢也是開足馬力,體檢感杠杠的。
那問題來了,使用vue+webpack的單頁面是爽到爆,那如果是多頁面也能不能high到爆呢?那當(dāng)然呀,必須的必,vue、webpack的忠粉(哈哈,好像這忠粉不關(guān)系到多頁面的)。
在谷歌找vue 多頁面,實(shí)例還是比較少,功夫不負(fù)有心人,在yaoyao1987那找到了,具體可以到這個(gè)yaoyao1987 github,非常感謝yaoyao1987童鞋,今天要講的內(nèi)容是基于yaoyao1987童鞋的多頁面實(shí)例上再優(yōu)化的。
優(yōu)化了點(diǎn)啥
github地址:https://github.com/bluefox1688/vue-cli-multi-page
優(yōu)化的內(nèi)容
我們先來講講,具體我們優(yōu)化了什么內(nèi)容。
- 增加全局統(tǒng)一使用的模塊Lib.js庫,可能這里看不明白,不要緊,后面會講到。
- 支持字體圖標(biāo)
- 增加干凈的頁面、組件的模板,復(fù)制即可以使用。
- 去掉多余的代碼注釋,坑了我的注釋,別再坑人了
- 構(gòu)建時(shí),增加對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,需要更改的童鞋請到項(xiàng)目根目錄文件config.js
修改。
目錄結(jié)構(gòu)
webpack |---build |---src |---assets 資源 |---css.css css |---img 圖片文件 |---font/ 字體圖標(biāo) |---components 組件 |---Button.vue 按鈕組件 |---module-head.vue head組件 |---module各個(gè)頁面模塊 |---login 登陸模塊 |---login.html |---login.js |---app.vue |---welcome 歡迎頁模塊 |---welcome.html |---welcome.js |---app.vue
從目錄結(jié)構(gòu)上,各種組件、頁面模塊、資源等都按類新建了文件夾,方便我們儲存文件。
其實(shí)我們所有的文件,最主要都是放在module
文件夾里,以文件夾名為html的名稱。
例如
|---login 登陸模塊 |---login.html |---login.js |---app.vue
就是我們訪問時(shí)的地址:http://localhost:8083/module/login.html
這里一定要記住,在module
里下級文件夾,一個(gè)文件夾就是一個(gè)html,js
、vue template
都統(tǒng)一放在當(dāng)前文件夾里,當(dāng)然你也可以繼續(xù)放其他的資源,例如css、圖片等,webpack會打包到當(dāng)前頁面里。
如果項(xiàng)目不需要這個(gè)頁面了,可以直接把這個(gè)文件夾直接刪除掉,干凈項(xiàng)目,干活也開心。
像以前我們傳統(tǒng)開發(fā)項(xiàng)目,所有的圖片都習(xí)慣放在images
里,當(dāng)項(xiàng)目有改動時(shí),有些圖片等資源用不上了,但還占著坑位,雖
然現(xiàn)在的硬件容量大到驚人,但我們應(yīng)該還是要養(yǎng)到一個(gè)良好的習(xí)慣。
當(dāng)前頁面的開發(fā)在app.vue
里,打開后你就會看到很熟悉的<template>、<script>、<style scoped>
了。
全局統(tǒng)一公共模塊
我們做多頁面開發(fā),那肯定會涉及到全局都能調(diào)用的公共庫,或者是把別人封裝的庫也一起打包在全局公共模塊里。
如果看過源碼的童鞋,在*.vue
頁面里,我都統(tǒng)一import了一個(gè)文件
import Lib from 'assets/Lib.js'
這就是全局統(tǒng)一公共模塊,我們先看看Lib.js里的代碼
# 導(dǎo)入全局的css import 'assets/css.css'; # 導(dǎo)入全局的站點(diǎn)配置文件 import C from 'assets/conf'; # 導(dǎo)入全局的共用事件 import M from 'assets/common'; var Rxports = { M,C }; module.exports = Rxports
在上方代碼的M、C都是什么鬼,聰明的小伙伴就知道我想干嘛了,省寫少事唄。
例如我們現(xiàn)在想調(diào)用APP的名稱,在.vue里可以這么寫
import Lib from 'assets/Lib.js' Lib.C.appname; # 藍(lán)鍋鍋
只需要在*.vue
里導(dǎo)入import Lib from 'assets/Lib.js'
,就可以到處使用全局模塊了。
不再像傳統(tǒng)的開發(fā)模式,需要一堆的<script>
一個(gè)一個(gè)的來放到頁面的底部。
傳統(tǒng)方式:
<script type='text/javascript' src='//g.alicdn.com/sj/lib/zepto/zepto.min.js' charset='utf-8'></script> <script type='text/javascript' src='//g.alicdn.com/msui/sm/0.6.2/js/sm.min.js' charset='utf-8'></script> <script type="text/javascript" src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
這里就是我想講的關(guān)于優(yōu)化的第一點(diǎn)提到的全局模塊庫。
當(dāng)然也有童鞋問呀,會不會每個(gè)頁面都會把這些全局模塊庫都打包在當(dāng)前頁面,那JS文件體積大到驚人。
哎呀,你當(dāng)webpack是二貨的呀,webpack
會自動幫你處理好的,會把在*.vue
里的import Lib from 'assets/Lib.js'
的庫自動提取出來,放到一個(gè)全局的JS文件里,這就是自動構(gòu)造的神奇呀,省心省電,媽媽再也不用擔(dān)心我做重復(fù)的工作了。
在Lib.js
里,我們也看到有兩個(gè)導(dǎo)入的JS文件,主要來做什么的呢?
為了更好的在全局調(diào)用模塊里,知道哪個(gè)模塊的作用是什么,另外在寫代碼時(shí)更能快速查找到JS文件,我區(qū)分了配置文件和共用事件文件,即conf、common,下面說下具體的用途。
# 儲存站點(diǎn)的配置,例如web的名稱、LOGO地址等 import C from 'assets/conf'; # 導(dǎo)入全局的共用事件,例如在微信的JS SDK初始化,每個(gè)頁面都要分享,都需要初始化的,一次調(diào)用,全局使用,棒??! import M from 'assets/common';
當(dāng)然,你也可以不像這樣區(qū)分不同的JS文件,刪除也沒有影響的,具體也要看項(xiàng)目的需要而定,不能死讀書。
另外,如果想要干凈的頁面模塊模板,可以到根目錄的tpl
里復(fù)制module_tpl
整個(gè)文件夾,然后粘貼到src/module
目錄下馬上就可以進(jìn)行開發(fā)了,開發(fā)之前記得在cmd
里npm run dev
跑一遍,新增頁面都要重新dev一遍。
module
我們就講到這里,下面我們來講講組件的調(diào)用,最愛組件了。
組件的使用
組件(Component)是 vue.js 最強(qiáng)大的功能之一,當(dāng)你發(fā)現(xiàn)使用組件可以減少造輪子里,你會深深的愛上它。
我們的組件都是放在components
目錄下的,調(diào)用組件的方法也很簡單。
import Button from 'components/Button';
然后記得在*.vue注冊導(dǎo)入的組件,要不然會影響使用。
import Button from 'components/Button'; export default { data() { return { } }, components: { # 在這里注冊組件,不注冊組件的話,是無法使用的。 Button } }
如果想要干凈的組件模板,可以到根目錄的tpl里找到components_tpl的Hello.vue文件,復(fù)制粘貼到components目錄下馬上就可以進(jìn)行開發(fā)了。
圖標(biāo)字體
在yaoyao1987童鞋里,是沒有打包構(gòu)造圖標(biāo)字體的代碼邏輯,這也是我優(yōu)化上去的一部分,建議使用iconfont
圖標(biāo)(http://www.iconfont.cn) ,強(qiáng)大到無所不能,可以到iconfont
下載自己想要的圖標(biāo)字體,記得是把文件放到\src\assets\font
文件夾里。
webpack
會自動打包的,無需理會,另外還有一點(diǎn),iconfont
提供的css文件,復(fù)制到\src\assets\css.css
文件即可,要不然沒有效果哈。
在*.vue
里使用調(diào)用就行了。
<i class="iconfont">!</i>
構(gòu)建代碼說明
那我們使用的是vue-cli的手腳架,用過vue+cli
的朋友知道主要構(gòu)建代碼都放在根目錄build
下,vue多頁面主要修改了這三個(gè)JS文件webpack.base.conf.js
、webpack.dev.conf.js
、webpack.prod.conf.js
# 【webpack.base.conf.js】主要是構(gòu)建的全局設(shè)置,主要是增加了以下代碼,已經(jīng)增加在JS文件里,這里只是做一個(gè)補(bǔ)充說明,具體請看`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; }
這里還要做一個(gè)特別說明,我們每次更新資源文件,為了去緩存,都會給文件生成hash值,例如:
<script type='text/javascript' src='vendors.61714a310523a3df9869.js' charset='utf-8'></script> <script type='text/javascript' src='vendors.js?f3aaf25de220e214f84e' charset='utf-8'></script>
這兩者都是為了去緩存,唯一的區(qū)別的生成的文件名不一樣,有些項(xiàng)目,為了可以能出嚴(yán)重BUG時(shí)第一時(shí)間回滾,以文件名
+hash
的方式儲存,每次生成都不會覆蓋之前的代碼,以方便查BUG或者回滾。
另一種方式,就是以文件名
+?hash
的方式儲存,每次都會覆蓋之前生成的資源,方便在某些特殊項(xiàng)目使用。
我在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é)束言
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
vue實(shí)現(xiàn)table表格里面數(shù)組多層嵌套取值
這篇文章主要介紹了vue實(shí)現(xiàn)table表格里面數(shù)組多層嵌套取值,具有很好的參考價(jià)值,希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-08-08vue的style綁定background-image的方式和其他變量數(shù)據(jù)的區(qū)別詳解
今天小編就為大家分享一篇vue的style綁定background-image的方式和其他變量數(shù)據(jù)的區(qū)別詳解,具有很好的參考價(jià)值,希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09vue實(shí)現(xiàn)組件跟隨鼠標(biāo)位置彈出效果(示例代碼)
這篇文章主要介紹了vue中實(shí)現(xiàn)組件跟隨鼠標(biāo)位置彈出效果,本文通過圖文示例代碼相結(jié)合給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2022-02-02vue路由結(jié)構(gòu)可設(shè)一層方便動態(tài)添加路由操作
這篇文章主要介紹了vue路由結(jié)構(gòu)可設(shè)一層方便動態(tài)添加路由操作,具有很好的參考價(jià)值,希望對大家有所幫助。一起跟隨小編過來看看吧2020-08-08Electron中打包應(yīng)用程序及相關(guān)報(bào)錯(cuò)問題的解決
這篇文章主要介紹了Electron中打包應(yīng)用程序及相關(guān)報(bào)錯(cuò)問題的解決方案,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-03-03vue自定義橫向滾動條css導(dǎo)航兩行排列布局實(shí)現(xiàn)示例
這篇文章主要為大家介紹了vue自定義橫向滾動條css導(dǎo)航兩行排列布局實(shí)現(xiàn)示例,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-08-08