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 相关文章推荐
JavaScript 撑出页面文字换行
Jun 15 Javascript
封装好的js判断操作系统与浏览器代码分享
Jan 09 Javascript
HTML5之WebSocket入门3 -通信模型socket.io
Aug 21 Javascript
JS实现六边形3D拖拽翻转效果的方法
Sep 11 Javascript
JavaScript常用正则函数用法示例
Jan 23 Javascript
js输入框使用正则表达式校验输入内容的实例
Feb 12 Javascript
jQuery实用密码强度检测
Mar 02 Javascript
浅谈jQuery框架Ajax常用选项
Jul 08 jQuery
bing Map 在vue项目中的使用详解
Apr 09 Javascript
微信小程序页面滚动到指定位置代码实例
Sep 07 Javascript
javascript刷新父页面方法汇总详解
Oct 10 Javascript
js实现固定区域内的不重叠随机圆
Oct 24 Javascript
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
当海贼王变成JOJO风
2020/03/02 日漫
php实例分享之二维数组排序
2014/05/15 PHP
php模拟登陆的实现方法分析
2015/01/09 PHP
Yii框架使用魔术方法实现跨文件调用功能示例
2017/05/20 PHP
PHP数组对象与Json转换操作实例分析
2019/10/22 PHP
HTML页面如何象ASP一样接受参数
2007/02/07 Javascript
基于jquery的用鼠标画出可移动的div
2012/09/06 Javascript
JS中如何判断传过来的JSON数据中是否存在某字段
2014/08/18 Javascript
jQuery动态效果显示人物结构关系图的方法
2015/05/07 Javascript
Javascript监视变量变化的方法
2015/06/09 Javascript
详解JavaScript中数组的相关知识
2015/07/29 Javascript
浅谈Jquery中Ajax异步请求中的async参数的作用
2016/06/06 Javascript
js简单实现图片延迟加载的方法
2016/07/19 Javascript
基于JavaScript实现验证码功能
2017/04/01 Javascript
JavaScript事件方法(实例讲解)
2017/06/27 Javascript
微信小程序滚动Tab实现左右可滑动切换
2017/08/17 Javascript
Nodejs+express+ejs简单使用实例代码
2017/09/18 NodeJs
微信小程序wx.previewImage预览图片实例详解
2017/12/07 Javascript
Javascript实现鼠标点击冒泡特效
2019/12/24 Javascript
python中的多重继承实例讲解
2014/09/28 Python
numpy.transpose对三维数组的转置方法
2018/04/17 Python
python3+PyQt5重新实现自定义数据拖放处理
2018/04/19 Python
对python多线程中Lock()与RLock()锁详解
2019/01/11 Python
Django框架视图层URL映射与反向解析实例分析
2019/07/29 Python
Python基于xlutils修改表格内容过程解析
2020/07/28 Python
python录音并调用百度语音识别接口的示例
2020/12/01 Python
python复合条件下的字典排序
2020/12/18 Python
毕业自荐书
2013/12/09 职场文书
工作表现自我评价
2014/02/08 职场文书
小学庆六一活动总结
2014/08/28 职场文书
创新社会管理心得体会
2014/09/12 职场文书
2014年妇联工作总结
2014/11/21 职场文书
2016年社区“我们的节日·中秋节”活动总结
2016/04/05 职场文书
普希金的诗歌赏析(3首)
2019/08/20 职场文书
Python基础之进程详解
2021/05/21 Python
Vscode中SSH插件如何远程连接Linux
2022/05/02 Servers