require.js加载某视频剪辑软件组件r.js合并压缩的实例

时间：2021-09-07 来源：互联网编辑：宝哥软件园浏览：次

准备：

vue.js原本是学习某视频剪辑软件组件

require.js然后想到用需要加载

r.js文件太多合并

文件目录

忽略部分文件及文件夹

一、先说某视频剪辑软件组件

先引入某视频剪辑软件再引入某视频剪辑软件组件

Vue.extend({})定义组件模板数据方法

Vue.component()，注册组件的标签，标签在超文本标记语言中是一个挂载点

新Vue()进行实例化

index.html

//css引入略div id=' header ' TQ-header/TQ-header/div id=' footer ' TQ-footer/TQ-footer/div脚本src=' http : lib/vue。js '/script script src=' http :/vue-module/TQ-footer。js '/脚本TQ-header。js/

//数据定义变量数据={list: [{name: '首页，url: ' ./index.html '，}，{name: '博客，url: 'http://taoquns.com'}，{name: '微博，URL : ' http://微博。com/1654438844/profile？topnav=1wvr=6 ' }，{name: '简书，网址： ' http://www。健叔。com/users/633 b8 f 612 f8e/latest _ articles ' }，{name: '作品展示，网址： ' http://taoquns。com/my page ' }]，}；//定义组件模板数据方法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-表头绑定组件Vue.component('tq-header '，header)；//实例化new Vue({ El : ' # header ' })；tq-footer.js//定义组件内容，数据，方法var footer=Vue.extend({//模板模板： ' div class=' footer '测试页脚测试页脚/div '，//数据数据：函数(){返回{name: 'test name'}}，//方法方法： { show : function(){ alert(这。姓名)；}}});//注册组件的标签TQ-页脚绑定组件Vue.component('tq-footer '，页脚);//实例化new Vue({el: '#footer '，})；//vue组件结束

二、使用需要加载某视频剪辑软件组件

引入require.js

数据总管制定主模块，负责引入哪些文件

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

将某视频剪辑软件和某视频剪辑软件组件的引入注释掉，引入require.js数据-主指定主模块文件射流研究…文件夹下的script.js

脚本src=' http : lib/require。js ' data-main=' js/script。js '/脚本！-注释- !-脚本src='http:/lib/vue.js'/script -！-脚本src='http:/vue-模块/TQ-表头。js '/script-！-脚本src='http:/vue-模块/TQ-页脚。js '/script-！-脚本src=' http : vue-module/TQ-img-view。js /脚本-配置script.js文件看阮一峰的require.js

baseUrl默认路径基目录

夹铁非超微半导体公司规范的文件

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

script.js

要求。config({ baseurl : ' lib '，shim : { ' vue ' : { exports : ' vue ' })，paths: { ' vue ' : './lib/vue '，' header': './vue-模块/TQ-页眉','页脚' : './vue-module/tq-footer'}，})；需要(['vue '，' header '，' footer']，函数(vue，header，footer){ })；这样主模块就会先引入vue，在陆续引入某视频剪辑软件组件文件

某视频剪辑软件组件用定义()包裹

由于子组件依赖vue，所以需要写好依赖，并将参数某视频剪辑软件传进去如：

//函数参数某视频剪辑软件大写的V哦//这样内部的调用Vue.extend()等方法就可以正常使用了定义(['vue']，函数(Vue){ Vue。exxtend({ 0.});Vue.component(.);新Vue({ 0.});});tq-header.js和之前差不多就是加了定义()

//header header//require define function start define([' vue ']，function(vue){//data var data={ list : [{ name : ' home page '，url: '。/index.html '，} '，}，{name:' blog '，url:' http://taoquns.com'}，{name:' Weibo '，URL : ' http://Weibo.com/1654438844/profile？Topnav=1wvr=6'}，{name: '短书'，URL : ' http://www.jianshu.com/users/633b8f612f8e/latest _文章' }，{name3360 '作品展'，url3360' 3330。//定义组件模板数据方法var header=vue . extend({ template : ' div class=' header ' \ div class=' header-main ' \ ul \ liv-for=' I in list ' \ av-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)；//实例化新的Vue({ El : ' # header ' })；});//require define函数endtq-footer.js//尾页脚//require.js define()函数包装define(['vue']，Function(Vue) {//vue组件/**模板html模板文件*返回数据中的对象返回函数*方法集*///定义组件内容，数据，Method varfooter=Vue . extend({ template : ' div class=' footer ' \ div class=' footer-main ' \ ptao Kun个人博客|记录|显示|使用Vue \ A href=' mailto :[email protected]'联系人}}});//注册组件的标签tq-footer来绑定组件vue.component ('TQ-footer '，footer)；//实例化新的Vue({el: '#footer '，})；//结束//vue组件})；//定义endrequire方法预览成功