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 相关文章推荐
jquery判断checkbox(复选框)是否被选中的代码
Oct 20 Javascript
检测input每次的输入是否合法遇到汉字输入就有问题
May 23 Javascript
简单的js表单验证函数
Oct 28 Javascript
javascript Slip.js实现整屏滑动的手机网页
Nov 25 Javascript
深入理解jQuery事件绑定
Jun 02 Javascript
详解Require.js与Sea.js的区别
Aug 05 Javascript
在vue中使用G2图表的示例代码
Mar 19 Javascript
移动端自适应flexible.js的使用方法(不用三大框架,仅写一个单html页面使用)推荐
Apr 02 Javascript
socket在egg中的使用实例代码详解
May 30 Javascript
JS数组Object.keys()方法的使用示例
Jun 05 Javascript
JavaScript canvas实现雨滴特效
Jan 10 Javascript
关于Javascript闭包与应用的详解
Apr 22 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
2020最新CPU的性能排名
2020/04/02 数码科技
PHP 图片上传代码
2011/09/13 PHP
PHP 8新特性简介
2020/08/18 PHP
JavaScript类和继承 prototype属性
2010/09/03 Javascript
无刷新预览所选择的图片示例代码
2014/04/02 Javascript
node.js [superAgent] 请求使用示例
2015/03/13 Javascript
浅谈JavaScript正则表达式分组匹配
2015/04/10 Javascript
javascript实现任务栏消息提示的简单实例
2016/05/31 Javascript
jQuery 实现ajax传入参数含有特殊字符的方法总结
2016/10/17 Javascript
基于JavaScript实现随机颜色输入框
2016/12/10 Javascript
详解Vue 普通对象数据更新与 file 对象数据更新
2017/04/26 Javascript
vue按需引入element Transfer 穿梭框
2017/09/30 Javascript
switchery按钮的使用方法
2017/12/18 Javascript
解决Jstree 选中父节点时被禁用的子节点也会选中的问题
2017/12/27 Javascript
vue-cli3脚手架的配置及使用教程
2018/08/28 Javascript
Vue在 Nuxt.js 中重定向 404 页面的方法
2019/04/23 Javascript
VUE+Element实现增删改查的示例源码
2020/11/23 Vue.js
总结Python编程中函数的使用要点
2016/03/20 Python
python利用拉链法实现字典方法示例
2017/03/25 Python
python调用Delphi写的Dll代码示例
2017/12/05 Python
Python实现的爬虫刷回复功能示例
2018/06/07 Python
Python import与from import使用及区别介绍
2018/09/06 Python
Python面向对象程序设计OOP深入分析【构造函数,组合类,工具类等】
2019/01/05 Python
Python3.5多进程原理与用法实例分析
2019/04/05 Python
如何在Python中实现goto语句的方法
2019/05/18 Python
Python使用pymysql模块操作mysql增删改查实例分析
2019/12/19 Python
Python常用模块sys,os,time,random功能与用法实例分析
2020/01/07 Python
Python阶乘求和的代码详解
2020/02/14 Python
python 一维二维插值实例
2020/04/22 Python
详解移动端HTML5音频与视频问题及解决方案
2018/08/22 HTML / CSS
户外宣传策划方案
2014/05/25 职场文书
企业爱岗敬业演讲稿
2014/09/04 职场文书
纪念九一八事变演讲稿:勿忘国耻
2014/09/14 职场文书
2016党员干部廉洁自律心得体会
2016/01/13 职场文书
幼儿园音乐教学反思
2016/02/18 职场文书
Linux系统下MySQL配置主从分离的步骤
2022/03/21 MySQL