require.js 然后想到用require 加载
r.js 文件太多 合并
文件目录
忽略部分文件及文件夹
一、先说vue 组件
先引入vue 再引入vue组件
Vue.extend({}) 定义组件 template data methods
Vue.component()，注册组件的标签，标签在html中是一个挂载点
new Vue() 进行实例化
index.html
// css引入 略 <div> <tq-header></tq-header> </div> <div> <tq-footer></tq-footer> </div> <script src="https://www.jb51.net/lib/vue.js"></script> <script src="https://www.jb51.net/vue-module/tq-header.js"></script> <script src="https://www.jb51.net/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>\ <div>\ <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>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 加载 vue 组件
引入require.js
data-main 制定主模块，负责引入哪些文件
子组件 需要用 define()函数包裹 见例子
将vue 和vue组件的引入注释掉,引入require.js data-main 指定主模块文件 js文件夹下的 script.js
<script src="https://www.jb51.net/lib/require.js" data-main="js/script.js"></script> <!-- 注释 --> <!-- <script src="https://www.jb51.net/article/lib/vue.js"></script> --> <!-- <script src="https://www.jb51.net/article/vue-module/tq-header.js"></script> --> <!-- <script src="https://www.jb51.net/article/vue-module/tq-footer.js"></script> --> <!-- <script src="https://www.jb51.net/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>\ <div>\ <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>\ <div>\ <p>taoqun个人博客 | 记录 | 展示 | 使用vue\ <a href="https://www.jb51.net/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 方法 预览成功
三、r.js 合并压缩
使用require 的方式 会加载很多的js文件，我们都知道这样会产生对服务器的多次请求，优化性能第一就是减少http请求次数
简单的说下r.js