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

2023-09-10 05:01:05 373

requireJs简介

参数配置

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

require
define

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

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

加载配置文件

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

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

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

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

常用参数配置

urlArgs

RequireJS获取资源时附加在URL后面的额外的query参数。作为浏览器或服务器未正确配置时的“cachebust”手段很有用。使用cachebust配置的一个示例：
javascript:;urlArgs:"bust="+(newDate()).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){
varresolve=function(dep){
returnfunction(){
if(!(depinstanceofArray)){
dep=[dep];
}
vardeferred=Q.defer();
require(dep,function(res){
deferred.resolve(res);
});
returndeferred.promise;
};
};
returnresolve;
});

index





require(["vue","vueRouter","router","header"],function(vue,vueRouter,router,header){
vue.use(vueRouter);
varroutes=newvueRouter({
routes:router
});
newVue({
router:routes,
data:function(){
return{
aa:true
};
}
}).$mount("body");
});

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。

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

热门推荐

随机推荐