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

前端之家收集整理的这篇文章主要介绍了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); } } }); // 注册组件的标签 绑定组件 Vue.component('tq-footer',}); //vue组件结束 }); //define end

require 方法 预览成功

@H_301_57@

三、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 合并压缩的实例。编程之家 jb51.cc 收集整理的教程希望能对你有所帮助,如果觉得编程之家不错,可分享给好友!感谢支持

原文链接:https://www.f2er.com/vue/45160.html

猜你在找的Vue相关文章