vue系列之requireJs中引入vue-router的方法
requireJs簡介
參數(shù)配置
requireJS 常用的方法與命令也就兩個,因此requireJS使用起來非常簡單。
require
define
其中define是用于定義模塊,而require是用于載入模塊以及載入配置文件。
define([id,deps,] callback); require(deps[,callback]);
加載配置文件
獨立的引入配置文件也有兩種方式,一種是通過script標(biāo)簽加載外部JS文件形式:
<script src="js/require.js"></script> <script src="js/app.js"></script>
另一種方式則是使用 require 提供的 data-main 屬性,該屬性是直接寫在引入require.js的script標(biāo)簽上,在require.js 加載完畢時,會自動去加載配置文件 app.js。
<script data-main="js/app" src="js/require.js"></script>
通過 data-main 去加載入口文件,便會使配置對象中的 baseUrl 屬性默認(rèn)指向地址改為 app.js 所在的位置,相比之下我更加推薦這種方式,因為它更可能的方便快捷。
<script data-main="js/app.js" src="js/require.js"></script>
注意:你在main.js中所設(shè)置的腳本是異步加載的。所以如果你在頁面中配置了其它JS加載,則不能保證它們所依賴的JS已經(jīng)加載成功。
常用參數(shù)配置
urlArgs
RequireJS獲取資源時附加在URL后面的額外的query參數(shù)。作為瀏覽器或服務(wù)器未正確配置時的“cache bust”手段很有用。使用cache bust配置的一個示例:
javascript:;urlArgs: "bust=" + (new Date()).getTime()
在開發(fā)中這很有用,但請記得在部署到生成環(huán)境之前移除它。
deps
用于聲明require.js在加載完成時便會自動加載的模塊,值是一個數(shù)組,數(shù)組元素便是模塊名。
config
config屬性可以為模塊配置額外的參數(shù)設(shè)定,其使用格式就是以模塊名或者模塊ID為key,然后具體的參數(shù)為value。
shim
shim為那些沒有使用define()來聲明依賴關(guān)系、設(shè)置模塊的"瀏覽器全局變量注入"型腳本做依賴和導(dǎo)出配置。
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");
});
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
VUE項目啟動沒有問題但代碼中script標(biāo)簽有藍(lán)色波浪線標(biāo)注
這篇文章主要給大家介紹了關(guān)于VUE項目啟動沒有問題但代碼中script標(biāo)簽有藍(lán)色波浪線標(biāo)注的相關(guān)資料,文中將遇到的問題以及解決的方法介紹的非常詳細(xì),需要的朋友可以參考下2023-05-05
vscode 使用Prettier插件格式化配置使用代碼詳解
這篇文章主要介紹了vscode 使用Prettier插件格式化配置使用,本文給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2020-08-08
使用konva和vue-konva庫實現(xiàn)拖拽滑塊驗證功能
這篇文章主要介紹了使用konva和vue-konva完成前端拖拽滑塊驗證功能,本文通過實例代碼給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2020-04-04
Vue實現(xiàn)動態(tài)顯示表單項填寫進(jìn)度功能
這篇文章主要介紹了Vue實現(xiàn)動態(tài)顯示表單項填寫進(jìn)度功能,此功能可以幫助用戶了解表單填寫的進(jìn)度和當(dāng)前狀態(tài),提高用戶體驗,通常實現(xiàn)的方式是在表單中添加進(jìn)度條,根據(jù)用戶填寫狀態(tài)動態(tài)更新進(jìn)度條,感興趣的同學(xué)可以參考下文2023-05-05
關(guān)于Vue?CLI3中啟動cli服務(wù)參數(shù)說明
這篇文章主要介紹了關(guān)于Vue?CLI3中啟動cli服務(wù)參數(shù)說明,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2022-04-04

