require.js 加载 vue组件 r.js 合并压缩的实例
准备：vue.js 原本是学习vue组件 require.js 然后想到用require 加载 r.js 文件太多 合并 文件目录忽略部分文件及文件夹
一、先说vue 组件先引入vue 再引入vue组件 Vue.extend({}) 定义组件 template data methods Vue.component()，注册组件的标签，标签在html中是一个挂载点 new Vue() 进行实例化 index.html 配置script.js文件 看阮一峰的require.js baseUrl 默认路径 基目录 shim 非AMD规范的文件 paths 制定各个模块的加载路径 script.js 这样主模块就会先引入vue ，在陆续引入vue组件文件 vue 组件用define() 包裹 由于子组件依赖vue，所以需要写好依赖，并将参数Vue传进去 如: tq-header.js 和之前差不多就是加了define() 绑定组件
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: '
',data: function() {
return {
name: 'function'
}
},methods: {
show: function() {
alert(this.name);
}
}
});
// 注册组件的标签 require 方法 预览成功
三、r.js 合并压缩使用require 的方式 会加载很多的js文件，我们都知道这样会产生对服务器的多次请求，优化性能第一就是减少http请求次数
简单的说下r.js r.js是requireJS的优化（Optimizer）工具，可以实现前端文件的压缩与合并，在requireJS异步按需加载的基础上进一步提供前端优化，减小前端文件大小、减少对服务器的文件请求。 就是写一个配置文件，将页面需要的js组件文件合并到一个，然后require.js 直接引用合并压缩后的文件就可以了，只需要加载一个文件。 准备r.js 下载一个r.js文件放到目录中 node.js 本地需要安装node.js
这里我们将r.js 放到js文件中，建立一个build.js 配置文件 然后说下build.js 的配置 build.js 我这里比较简单 baseUrl 设置基目录 paths 模块的引用 name 主模块的引用 out 输入位置 然后控制台 定位到r.js目录下 node r.js -o build.js 命令进行合并压缩，当目录下出现main.js 文件时，表示成功了。
然后将 index.html 中 data-main 原来的script.js改成 main.js 打开就好了 以上所述是小编给大家介绍的require.js 加载 vue组件 r.js 合并压缩的实例。编程之家 52php.cn 收集整理的教程希望能对你有所帮助，如果觉得编程之家不错，可分享给好友！感谢支持。 （编辑：李大同） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |
