vue系列之requireJs中引入vue-router的方法
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 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- Mac系统R语言升级后无法加载包报错 package or namespace load failed in dyn.load
- 如何从xml文件创建R语言数据框dataframe
- Matlab马尔可夫链蒙特卡罗法(MCMC)估计随机波动率(SV) 模型
- 如何从xml文件创建R语言数据框dataframe
- R语言POT超阈值模型和极值理论EVT分析
- R语言使用灰色关联分析(Grey Relation Analysis,GRA)中国经济社会发展指标
- R语言中的模拟过程和离散化:泊松过程和维纳过程
- R语言Lee-Carter模型对年死亡率建模预测预期寿命
- R语言有极值(EVT)依赖结构的马尔可夫链(MC)对洪水极值分析
- RxSwift 封装 CoreBluetooth(一) 配置
- Golang 操作Excel文件
- 腾讯云TKE-搭建prometheus监控(一)
- Android开发中ProgressDialog简单用法示例
- Android实现拍照及图片裁剪(6.0以上权限处理及7.0以上文件管理)
- Android仿微信调用第三方地图应用导航(高德、百度、腾讯)