require.js 加载 vue组件 r.js 合并压缩的实例


Posted in Javascript onOctober 14, 2016

准备:

vue.js 原本是学习vue组件

require.js 然后想到用require 加载

r.js 文件太多 合并

文件目录

忽略部分文件及文件夹

require.js 加载 vue组件 r.js 合并压缩的实例

一、先说vue 组件

先引入vue 再引入vue组件

Vue.extend({}) 定义组件 template data methods

Vue.component(),注册组件的标签,标签在html中是一个挂载点

new Vue() 进行实例化

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

//数据
var data = {
list: [{
name: "首页",
url: "./index.html",
}, {
name: "博客",
url: "http://taoquns.com"
}, {
name: "微博",
url: "http://weibo.com/1654438844/profile?topnav=1&wvr=6"
}, {
name: "简书",
url: "http://www.jianshu.com/users/633b8f612f8e/latest_articles"
}, {
name: "作品展示",
url: "http://taoquns.com/mypage"
}],
};
//定义组件 模板 数据 方法
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() {
}
},
});
// 注册组件标签 <tq-header> 绑定组件 
Vue.component('tq-header', header);
//实例化
new Vue({
el: '#header'
});
tq-footer.js
// 定义组件内容,数据,方法
var footer = Vue.extend({
//模板
template: '<div class="footer">test footer test footer</div>',
//数据
data: function() {
return {
name: 'test name'
}
},
//方法
methods: {
show: function() {
alert(this.name);
}
}
});
// 注册组件的标签 <tq-footer> 绑定组件
Vue.component('tq-footer', footer);
//实例化
new Vue({
el: '#footer',
});
//vue组件结束

require.js 加载 vue组件 r.js 合并压缩的实例

二、使用require 加载 vue 组件

引入require.js

data-main 制定主模块,负责引入哪些文件

子组件 需要用 define()函数包裹 见例子

将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 默认路径 基目录

shim 非AMD规范的文件

paths 制定各个模块的加载路径

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){
});

这样主模块就会先引入vue ,在陆续引入vue组件文件

vue 组件用define() 包裹

由于子组件依赖vue,所以需要写好依赖,并将参数Vue传进去 如:

// 函数参数Vue 大写的V哦
// 这样内部的调用Vue.extend() 等方法就可以正常使用了
define(['vue'],function(Vue){
Vue.exxtend({...});
Vue.component(.....);
new Vue({....});
});

tq-header.js 和之前差不多就是加了define()

// 头部 header
//require define 函数 start
define(['vue'], function(Vue) {
//数据
var data = {
list: [{
name: "首页",
url: "./index.html",
}, {
name: "博客",
url: "http://taoquns.com"
}, {
name: "微博",
url: "http://weibo.com/1654438844/profile?topnav=1&wvr=6"
}, {
name: "简书",
url: "http://www.jianshu.com/users/633b8f612f8e/latest_articles"
}, {
name: "作品展示",
url: "http://taoquns.com/mypage"
}],
};
//定义组件 模板 数据 方法
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() {
}
},
});
// 注册组件标签 <tq-header> 绑定组件
Vue.component('tq-header', header);
//实例化
new Vue({
el: '#header'
});
});
//require define 函数 end
tq-footer.js
// 尾部 footer 
// require.js define() 函数包裹
define(['vue'], function(Vue) {
//vue 组件
/*
* template html模板文件
* data 数据 返回函数中返回对象
* methods 方法集合
*/
// 定义组件内容,数据,方法
var footer = Vue.extend({
template: '<div class="footer">\
<div class="footer-main">\
<p>taoqun个人博客 | 记录 | 展示 | 使用vue\
<a href="mailto:taoquns@foxmail.com">联系我:email</a>\
</p>\
</div>\
</div>',
data: function() {
return {
name: 'function'
}
},
methods: {
show: function() {
alert(this.name);
}
}
});
// 注册组件的标签 <tq-footer> 绑定组件
Vue.component('tq-footer', footer);
//实例化
new Vue({
el: '#footer',
});
//vue组件结束
});
//define end

require 方法 预览成功

require.js 加载 vue组件 r.js 合并压缩的实例

三、r.js 合并压缩

使用require 的方式 会加载很多的js文件,我们都知道这样会产生对服务器的多次请求,优化性能第一就是减少http请求次数

require.js 加载 vue组件 r.js 合并压缩的实例

简单的说下r.js

r.js是requireJS的优化(Optimizer)工具,可以实现前端文件的压缩与合并,在requireJS异步按需加载的基础上进一步提供前端优化,减小前端文件大小、减少对服务器的文件请求。

就是写一个配置文件,将页面需要的js组件文件合并到一个,然后require.js 直接引用合并压缩后的文件就可以了,只需要加载一个文件。

准备

r.js 下载一个r.js文件放到目录中

node.js 本地需要安装node.js

require.js 加载 vue组件 r.js 合并压缩的实例

这里我们将r.js 放到js文件中,建立一个build.js 配置文件

然后说下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'
})

我这里比较简单

baseUrl 设置基目录

paths 模块的引用

name 主模块的引用

out 输入位置

然后控制台 定位到r.js目录下 node r.js -o build.js 命令进行合并压缩,当目录下出现main.js 文件时,表示成功了。

require.js 加载 vue组件 r.js 合并压缩的实例

然后将 index.html 中 data-main 原来的script.js改成 main.js 打开就好了

<script src="lib/require.js" data-main="js/main.js"></script>

以上所述是小编给大家介绍的require.js 加载 vue组件 r.js 合并压缩的实例,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
js 对联广告、漂浮广告封装类(IE,FF,Opera,Safari,Chrome
Nov 26 Javascript
让你的博客飘雪花超出屏幕依然看得见
Jan 04 Javascript
JS基于面向对象实现的放烟花效果
May 07 Javascript
基于Arcgis for javascript实现百度地图ABCD marker的效果
Sep 12 Javascript
JavaScript知识点总结(六)之JavaScript判断变量数据类型
May 31 Javascript
原生JS实现风箱式demo,并封装了一个运动框架(实例代码)
Jul 22 Javascript
bootstrap fileinput插件实现预览上传照片功能
Jan 23 Javascript
JavaScript实现的简单Tab点击切换功能示例
Jul 06 Javascript
Laravel admin实现消息提醒、播放音频功能
Jul 10 Javascript
JavaScript中0、空字符串、'0'是true还是false的知识点分享
Sep 16 Javascript
微信小程序实现侧边分类栏
Oct 21 Javascript
uni-app使用countdown插件实现倒计时
Nov 01 Javascript
浅析JS中对函数function的理解(基础篇)
Oct 14 #Javascript
js插件Jcrop自定义截取图片功能
Oct 14 #Javascript
jQuery.form.js插件不能解决连接超时(timeout)的原因分析及解决方法
Oct 14 #Javascript
Js动态设置rem来实现移动端字体的自适应代码
Oct 14 #Javascript
JS动态计算移动端rem的解决方案
Oct 14 #Javascript
javascript对浅拷贝和深拷贝的详解
Oct 14 #Javascript
jQuery web 组件 后台日历价格、库存设置的代码
Oct 14 #Javascript
You might like
php中使用__autoload()自动加载未定义类的实现代码
2013/02/06 PHP
php 利用socket发送HTTP请求(GET,POST)
2015/08/24 PHP
PHP访问数据库集群的方法小结
2016/03/14 PHP
PHP数组编码gbk与utf8互相转换的两种方法
2016/09/01 PHP
php实现文件上传及头像预览功能
2017/01/15 PHP
PHP 网站修改默认访问文件的nginx配置
2017/05/27 PHP
php readfile()修改文件上传大小设置
2017/08/11 PHP
基于jquery的仿百度的鼠标移入图片抖动效果
2010/09/17 Javascript
js setTimeout 常见问题小结
2013/08/13 Javascript
利用js制作html table分页示例(js实现分页)
2014/04/25 Javascript
innerHTML中标签可以换行的方法汇总
2015/08/14 Javascript
jQuery下拉友情链接美化效果代码分享
2015/08/26 Javascript
jquery自定义右键菜单、全选、不连续选择
2016/03/01 Javascript
js实现可旋转的立方体模型
2016/10/16 Javascript
浅谈AngularJS中ng-class的使用方法
2016/11/11 Javascript
JS中如何实现Laravel的route函数详解
2017/02/12 Javascript
ES6教程之for循环和Map,Set用法分析
2017/04/10 Javascript
你有必要知道的10个JavaScript难点
2017/07/25 Javascript
微信小程序新闻网站详情页实例代码
2020/01/10 Javascript
Python基于pyCUDA实现GPU加速并行计算功能入门教程
2018/06/19 Python
python 进程的几种创建方式详解
2019/08/29 Python
使用Python刷淘宝喵币(低阶入门版)
2019/10/30 Python
Python+redis通过限流保护高并发系统
2020/04/15 Python
使用Python对Dicom文件进行读取与写入的实现
2020/04/20 Python
python开发入门——列表生成式
2020/09/03 Python
CSS3+Sprite实现僵尸行走动画特效源码
2016/01/27 HTML / CSS
HTML5实现QQ聊天气泡效果
2017/06/26 HTML / CSS
Artist Guitars新西兰:乐器在线商店
2017/09/17 全球购物
美国折扣地毯销售网站:Rugs.com
2020/03/27 全球购物
如何写出好的Java代码
2014/04/25 面试题
假日旅行社实习自我鉴定
2013/09/24 职场文书
三年级评语大全
2014/04/23 职场文书
法定代表人授权委托书
2014/09/19 职场文书
2016元旦晚会主持人开场白和结束语
2015/12/03 职场文书
css3 filter属性的使用简介
2021/03/31 HTML / CSS
浅谈MySQL next-key lock 加锁范围
2021/06/07 MySQL