require.js 加載 vue組件 r.js 合并壓縮的實(shí)例
準(zhǔn)備：
vue.js 原本是學(xué)習(xí)vue組件
require.js 然后想到用require 加載
r.js 文件太多 合并
文件目錄
忽略部分文件及文件夾
一、先說(shuō)vue 組件
先引入vue 再引入vue組件
Vue.extend({}) 定義組件 template data methods
Vue.component()，注冊(cè)組件的標(biāo)簽，標(biāo)簽在html中是一個(gè)掛載點(diǎn)
new Vue() 進(jìn)行實(shí)例化
index.html
// css引入 略 <div id="header"> <tq-header></tq-header> </div> <div id="footer"> <tq-footer></tq-footer> </div> <script src="lib/vue.js"></script> <script src="/vue-module/tq-header.js"></script> <script src="/vue-module/tq-footer.js"></script>
tq-header.js
//數(shù)據(jù)
var data = {
list: [{
name: "首頁(yè)",
url: "./index.html",
}, {
name: "博客",
url: "http://taoquns.com"
}, {
name: "微博",
url: "http://weibo.com/1654438844/profile?topnav=1&wvr=6"
}, {
name: "簡(jiǎn)書",
url: "http://www.jianshu.com/users/633b8f612f8e/latest_articles"
}, {
name: "作品展示",
url: "http://taoquns.com/mypage"
}],
};
//定義組件 模板 數(shù)據(jù) 方法
var header = Vue.extend({
template: '<div class="header">\
<div class="header-main">\
<ul>\
<li v-for="i in list">\
<a v-bind:href="i.url">\
{{i.name}}\
</a>\
</li>\
</ul>\
</div>\
</div>',
data: function() {
return data;
},
methods: {
show: function() {
}
},
});
// 注冊(cè)組件標(biāo)簽 <tq-header> 綁定組件
Vue.component('tq-header', header);
//實(shí)例化
new Vue({
el: '#header'
});
tq-footer.js
// 定義組件內(nèi)容，數(shù)據(jù)，方法
var footer = Vue.extend({
//模板
template: '<div class="footer">test footer test footer</div>',
//數(shù)據(jù)
data: function() {
return {
name: 'test name'
}
},
//方法
methods: {
show: function() {
alert(this.name);
}
}
});
// 注冊(cè)組件的標(biāo)簽 <tq-footer> 綁定組件
Vue.component('tq-footer', footer);
//實(shí)例化
new Vue({
el: '#footer',
});
//vue組件結(jié)束
二、使用require 加載 vue 組件
引入require.js
data-main 制定主模塊，負(fù)責(zé)引入哪些文件
子組件 需要用 define()函數(shù)包裹 見例子
將vue 和vue組件的引入注釋掉,引入require.js data-main 指定主模塊文件 js文件夾下的 script.js
<script src="lib/require.js" data-main="js/script.js"></script> <!-- 注釋 --> <!-- <script src="./lib/vue.js"></script> --> <!-- <script src="./vue-module/tq-header.js"></script> --> <!-- <script src="./vue-module/tq-footer.js"></script> --> <!-- <script src="vue-module/tq-img-view.js"></script> -->
配置script.js文件 看阮一峰的require.js
baseUrl 默認(rèn)路徑 基目錄
shim 非AMD規(guī)范的文件
paths 制定各個(gè)模塊的加載路徑
script.js
require.config({
baseUrl:'lib',
shim:{
'vue':{
exports:'vue'
}
},
paths:{
'vue':'../lib/vue',
'header':'../vue-module/tq-header',
'footer':'../vue-module/tq-footer'
},
});
require(['vue','header','footer'],function(vue,header,footer){
});
這樣主模塊就會(huì)先引入vue ，在陸續(xù)引入vue組件文件
vue 組件用define() 包裹
由于子組件依賴vue，所以需要寫好依賴，并將參數(shù)Vue傳進(jìn)去 如:
// 函數(shù)參數(shù)Vue 大寫的V哦
// 這樣內(nèi)部的調(diào)用Vue.extend() 等方法就可以正常使用了
define(['vue'],function(Vue){
Vue.exxtend({...});
Vue.component(.....);
new Vue({....});
})；
tq-header.js 和之前差不多就是加了define()
// 頭部 header
//require define 函數(shù) start
define(['vue'], function(Vue) {
//數(shù)據(jù)
var data = {
list: [{
name: "首頁(yè)",
url: "./index.html",
}, {
name: "博客",
url: "http://taoquns.com"
}, {
name: "微博",
url: "http://weibo.com/1654438844/profile?topnav=1&wvr=6"
}, {
name: "簡(jiǎn)書",
url: "http://www.jianshu.com/users/633b8f612f8e/latest_articles"
}, {
name: "作品展示",
url: "http://taoquns.com/mypage"
}],
};
//定義組件 模板 數(shù)據(jù) 方法
var header = Vue.extend({
template: '<div class="header">\
<div class="header-main">\
<ul>\
<li v-for="i in list">\
<a v-bind:href="i.url">\
{{i.name}}\
</a>\
</li>\
</ul>\
</div>\
</div>',
data: function() {
return data;
},
methods: {
show: function() {
}
},
});
// 注冊(cè)組件標(biāo)簽 <tq-header> 綁定組件
Vue.component('tq-header', header);
//實(shí)例化
new Vue({
el: '#header'
});
});
//require define 函數(shù) end
tq-footer.js
// 尾部 footer
// require.js define() 函數(shù)包裹
define(['vue'], function(Vue) {
//vue 組件
/*
* template html模板文件
* data 數(shù)據(jù) 返回函數(shù)中返回對(duì)象
* methods 方法集合
*/
// 定義組件內(nèi)容，數(shù)據(jù)，方法
var footer = Vue.extend({
template: '<div class="footer">\
<div class="footer-main">\
<p>taoqun個(gè)人博客 | 記錄 | 展示 | 使用vue\
<a href="mailto:taoquns@foxmail.com">聯(lián)系我：email</a>\
</p>\
</div>\
</div>',
data: function() {
return {
name: 'function'
}
},
methods: {
show: function() {
alert(this.name);
}
}
});
// 注冊(cè)組件的標(biāo)簽 <tq-footer> 綁定組件
Vue.component('tq-footer', footer);
//實(shí)例化
new Vue({
el: '#footer',
});
//vue組件結(jié)束
});
//define end
require 方法 預(yù)覽成功
三、r.js 合并壓縮
使用require 的方式 會(huì)加載很多的js文件，我們都知道這樣會(huì)產(chǎn)生對(duì)服務(wù)器的多次請(qǐng)求，優(yōu)化性能第一就是減少http請(qǐng)求次數(shù)
簡(jiǎn)單的說(shuō)下r.js
r.js是requireJS的優(yōu)化（Optimizer）工具，可以實(shí)現(xiàn)前端文件的壓縮與合并，在requireJS異步按需加載的基礎(chǔ)上進(jìn)一步提供前端優(yōu)化，減小前端文件大小、減少對(duì)服務(wù)器的文件請(qǐng)求。
就是寫一個(gè)配置文件，將頁(yè)面需要的js組件文件合并到一個(gè)，然后require.js 直接引用合并壓縮后的文件就可以了，只需要加載一個(gè)文件。
準(zhǔn)備
r.js 下載一個(gè)r.js文件放到目錄中
node.js 本地需要安裝node.js
這里我們將r.js 放到j(luò)s文件中，建立一個(gè)build.js 配置文件
然后說(shuō)下build.js 的配置
build.js
({
baseUrl:'../vue-module/',
paths:{
'header':'tq-header',
'footer':'tq-footer',
'imgview':'tq-img-view',
'vue':'../lib/vue',
},
name:'script',
out:'main.js'
})
我這里比較簡(jiǎn)單
baseUrl 設(shè)置基目錄
paths 模塊的引用
name 主模塊的引用
out 輸入位置
然后控制臺(tái) 定位到r.js目錄下 node r.js -o build.js 命令進(jìn)行合并壓縮，當(dāng)目錄下出現(xiàn)main.js 文件時(shí)，表示成功了。
然后將 index.html 中 data-main 原來(lái)的script.js改成 main.js 打開就好了
<script src="lib/require.js" data-main="js/main.js"></script>
以上所述是小編給大家介紹的require.js 加載 vue組件 r.js 合并壓縮的實(shí)例，希望對(duì)大家有所幫助，如果大家有任何疑問請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！
- vue elementUI table 自定義表頭和行合并的實(shí)例代碼
- Vue實(shí)現(xiàn)數(shù)據(jù)表格合并列rowspan效果
- vue實(shí)現(xiàn)將一個(gè)數(shù)組內(nèi)的相同數(shù)據(jù)進(jìn)行合并
- vue.js實(shí)現(xiàn)表格合并示例代碼
- antd vue table跨行合并單元格,并且自定義內(nèi)容實(shí)例
- vue 中 element-ui table合并上下兩行相同數(shù)據(jù)單元格
- vue單元格多列合并的實(shí)現(xiàn)
- vue動(dòng)態(tài)合并單元格并添加小計(jì)合計(jì)功能示例
- Vue Elenent實(shí)現(xiàn)表格相同數(shù)據(jù)列合并
- vue使用el-table動(dòng)態(tài)合并列及行
相關(guān)文章
這篇文章主要為大家介紹了Vue 的router路由，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來(lái)幫助2021-11-11
Vue Render函數(shù)創(chuàng)建DOM節(jié)點(diǎn)代碼實(shí)例
這篇文章主要介紹了Vue Render函數(shù)創(chuàng)建DOM節(jié)點(diǎn)代碼實(shí)例,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-07-07
vue使用swiper的時(shí)候第二輪事件不會(huì)觸發(fā)問題
這篇文章主要介紹了vue使用swiper的時(shí)候第二輪事件不會(huì)觸發(fā)問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-09-09
詳解基于vue-cli3快速發(fā)布一個(gè)fullpage組件
這篇文章主要介紹了詳解基于vue-cli3快速發(fā)布一個(gè)fullpage組件，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2019-03-03
vue iview實(shí)現(xiàn)分頁(yè)功能
這篇文章主要為大家詳細(xì)介紹了vue iview實(shí)現(xiàn)分頁(yè)功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-07-07
在實(shí)際開發(fā)中，不可避免的會(huì)使用到對(duì)于事件的操作，如何處理 DOM 事件流，成為我們必須要掌握的技能。這篇文章主要介紹了Vue.js 事件修飾符的使用教程,需要的朋友可以參考下2018-11-11
Nuxt3?使用?Vue.js?作為視圖引擎，Nuxt3?中提供了所有?Vue?3?功能，所以我們創(chuàng)建的Nuxt項(xiàng)目其實(shí)也是vue3項(xiàng)目，這篇文章主要介紹了Nuxt3重點(diǎn)特性使用舉例記錄,需要的朋友可以參考下2022-12-12
這篇文章主要為大家介紹了Javascript對(duì)象及Proxy工作原理詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-08-08
Vue.js 通過(guò)jQuery ajax獲取數(shù)據(jù)實(shí)現(xiàn)更新后重新渲染頁(yè)面的方法
今天小編小編就為大家分享一篇Vue.js 通過(guò)jQuery ajax獲取數(shù)據(jù)實(shí)現(xiàn)更新后重新渲染頁(yè)面的方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-08-08
這篇文章主要介紹了在Vue3中實(shí)現(xiàn)飄逸的元素拖拽,在本次案例中需要認(rèn)真思考對(duì)應(yīng)的幾個(gè)坐標(biāo)和移動(dòng)時(shí)坐標(biāo)如何更新，事件的使用要成對(duì)出現(xiàn)，如何在這個(gè)拖拽的 Icon 上增加點(diǎn)擊事件時(shí)還需要多做一些處理，需要的朋友可以參考下2023-07-07