vue系列之requireJs中引入vue-router的方法


Posted in Javascript onJuly 18, 2018

requireJs简介

参数配置

requireJS 常用的方法与命令也就两个,因此requireJS使用起来非常简单。

require
define

其中define是用于定义模块,而require是用于载入模块以及载入配置文件。

define([id,deps,] callback);
require(deps[,callback]);

加载配置文件

独立的引入配置文件也有两种方式,一种是通过script标签加载外部JS文件形式:

<script src="js/require.js"></script>
<script src="js/app.js"></script>

另一种方式则是使用 require 提供的 data-main 属性,该属性是直接写在引入require.js的script标签上,在require.js 加载完毕时,会自动去加载配置文件 app.js。

<script data-main="js/app" src="js/require.js"></script>

通过 data-main 去加载入口文件,便会使配置对象中的 baseUrl 属性默认指向地址改为 app.js 所在的位置,相比之下我更加推荐这种方式,因为它更可能的方便快捷。

<script data-main="js/app.js" src="js/require.js"></script>

注意:你在main.js中所设置的脚本是异步加载的。所以如果你在页面中配置了其它JS加载,则不能保证它们所依赖的JS已经加载成功。

常用参数配置

urlArgs

RequireJS获取资源时附加在URL后面的额外的query参数。作为浏览器或服务器未正确配置时的“cache bust”手段很有用。使用cache bust配置的一个示例:
javascript:;urlArgs: "bust=" + (new Date()).getTime()
在开发中这很有用,但请记得在部署到生成环境之前移除它。

deps

用于声明require.js在加载完成时便会自动加载的模块,值是一个数组,数组元素便是模块名。

config

config属性可以为模块配置额外的参数设定,其使用格式就是以模块名或者模块ID为key,然后具体的参数为value。

shim

shim为那些没有使用define()来声明依赖关系、设置模块的"浏览器全局变量注入"型脚本做依赖和导出配置。

require.config({
  baseUrl : "./src",
  paths :{
    jquery:"./lib/jquery.min",
    vue:"./lib/vue",
    vueResource:"./lib/vue-resource.min",
    vueX:"./lib/vuex",
    api :"./api/index",
    lodash : "./lib/lodash.min",
    bootstrap : "./assets/js/bootstrap/js/bootstrap.min",
    ripples : "./assets/js/bootstrap-material-design/js/ripples.min",
    material:"./assets/js/bootstrap-material-design/js/material.min"
  },
  shim : {
    bootstrap : ['jquery'],
    ripples:['jquery'],
    material:['jquery'],
  },
  packages: [
    {
      name: 'components',
      location: 'component',
      main: 'components'
    },
    {
      name : "vuex",
      location :"vuex",
      main : "vuex"
    }
  ]
});

vue项目

requirejs配置

require.config({
  baseUrl : "./src",
  paths :{
    vue:"./lib/vue",
    vueRouter: "./lib/vue-router",
    promise: "./lib/q",
    router: "./js/router",
    header: "./js/components/header"
  },
  shim : {
    vueRouter : ['vue']
  }
});

router配置

define(["resolve"], function(resolve){
  return [
    {
      path: "/home",
      name: "home",
      component: resolve("../js/xx.js")
    },
    {
      path: "/news",
      name: "news",
      component: resolve("../js/xx.js")
    }
  ];
});

resolve.js

define(["require", "promise"], function(require, Q){
  var resolve = function(dep) {
    return function() {
      if (!(dep instanceof Array)) {
        dep = [dep];
      }
      var deferred = Q.defer();
      require(dep, function(res) {
        deferred.resolve(res);
      });
      return deferred.promise;
    };
  };
  return resolve;
});

index

<body>
  <header></header>
  <router-view></router-view>
</body>
require(["vue", "vueRouter", "router", "header"], function(vue, vueRouter, router, header) {
  vue.use(vueRouter);
  var routes = new vueRouter({
    routes: router
  });
  new Vue({
    router: routes,
    data: function(){
      return {
        aa: true
      };
    }
  }).$mount("body");
});

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JS中简单的实现像C#中using功能(有源码下载)
Jan 09 Javascript
js控制页面的全屏展示和退出全屏显示的方法
Mar 10 Javascript
JS实现IE状态栏文字缩放效果代码
Oct 24 Javascript
window.location.reload 刷新使用分析(去对话框)
Nov 11 Javascript
jquery+css实现动感的图片切换效果
Nov 25 Javascript
整理一下常见的IE错误
Nov 18 Javascript
Angularjs中ng-repeat的简单实例
Aug 25 Javascript
mint-ui在vue中的使用示例
Apr 05 Javascript
原生js实现拖拽功能基本思路详解
Apr 18 Javascript
ES10 特性的完整指南小结
Mar 04 Javascript
Vue2(三)实现子菜单展开收缩,带动画效果实现方法
Apr 28 Javascript
Vue + iView实现Excel上传功能的完整代码
Jun 22 Vue.js
Vue隐藏显示、只读实例代码
Jul 18 #Javascript
详解vue中axios的封装
Jul 18 #Javascript
详解vue2.0监听属性的使用心得及搭配计算属性的使用
Jul 18 #Javascript
微信小程序将字符串生成二维码图片的操作方法
Jul 17 #Javascript
使用Vue实现图片上传的三种方式
Jul 17 #Javascript
vue的token刷新处理的方法
Jul 17 #Javascript
vue 权限认证token的实现方法
Jul 17 #Javascript
You might like
php获取qq用户昵称和在线状态(实例分析)
2013/10/27 PHP
推荐十款免费 WordPress 插件
2015/03/24 PHP
一个PHP实现的轻量级简单爬虫
2015/07/08 PHP
Laravel 队列使用的实现
2019/01/08 PHP
基于Laravel 多个中间件的执行顺序详解
2019/10/21 PHP
yii 框架实现按天,月,年,自定义时间段统计数据的方法分析
2020/04/04 PHP
JavaScript DOM学习第六章 表单实例
2010/02/19 Javascript
JavaScript使用Max函数返回两个数字中较大数的方法
2015/04/06 Javascript
js实现时间显示几天前、几小时前或者几分钟前的方法集锦
2015/05/29 Javascript
JS正则表达式学习之贪婪和非贪婪模式实例总结
2016/12/26 Javascript
详解webpack + react + react-router 如何实现懒加载
2017/11/20 Javascript
JS获取url参数,JS发送json格式的POST请求方法
2018/03/29 Javascript
解决vue的变量在settimeout内部效果失效的问题
2018/08/30 Javascript
微信小程序开发问题之wx.previewImage
2018/12/25 Javascript
Vue动画事件详解及过渡动画实例
2019/02/09 Javascript
js实现3D粒子酷炫动态旋转特效
2020/09/13 Javascript
Map与WeakMap类型在JavaScript中的使用详解
2020/11/18 Javascript
Vue如何跨组件传递Slot的实现
2020/12/14 Vue.js
解析Python编程中的包结构
2015/10/25 Python
深入理解Python中的内置常量
2017/05/20 Python
Python Opencv任意形状目标检测并绘制框图
2019/07/23 Python
Python3和pyqt5实现控件数据动态显示方式
2019/12/13 Python
Hurley官方网站:扎根于海滩生活方式的全球青年文化品牌
2020/05/18 全球购物
自荐信格式简述
2014/01/25 职场文书
环保倡议书
2014/04/14 职场文书
初中生评语大全
2014/04/24 职场文书
意向书范本
2014/07/29 职场文书
管理失职检讨书范文
2015/05/05 职场文书
道歉的话怎么说
2015/05/12 职场文书
新娘婚礼致辞
2015/07/27 职场文书
入党后的感想
2015/08/10 职场文书
干部考核工作总结
2015/08/12 职场文书
2016大学先进团支部事迹材料
2016/03/01 职场文书
CSS+HTML 实现顶部导航栏功能
2021/08/30 HTML / CSS
8个JS的reduce使用实例和reduce操作方式
2021/10/05 Javascript
PostgreSQL并行计算算法及参数强制并行度设置方法
2022/04/06 PostgreSQL