點(diǎn)擊下載
本文文檔

當(dāng)前位置：首頁(yè) - 科技 - 知識(shí)百科 - 正文

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

來源：懂視網(wǎng) 責(zé)編：小采時(shí)間：2020-11-27 22:11:16

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

vue系列之requireJs中引入vue-router的方法:requireJs簡(jiǎn)介參數(shù)配置 requireJS 常用的方法與命令也就兩個(gè)，因此requireJS使用起來非常簡(jiǎn)單。 require define 其中define是用于定義模塊，而require是用于載入模塊以及載入配置文件。 define([id,deps,] callback);

推薦度：

點(diǎn)擊下載本文 文檔為doc格式

導(dǎo)讀vue系列之requireJs中引入vue-router的方法:requireJs簡(jiǎn)介參數(shù)配置 requireJS 常用的方法與命令也就兩個(gè)，因此requireJS使用起來非常簡(jiǎn)單。 require define 其中define是用于定義模塊，而require是用于載入模塊以及載入配置文件。 define([id,deps,] callback);

requireJs簡(jiǎn)介

參數(shù)配置

requireJS 常用的方法與命令也就兩個(gè)，因此requireJS使用起來非常簡(jiǎn)單。

require
define

其中define是用于定義模塊，而require是用于載入模塊以及載入配置文件。

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

加載配置文件

獨(dú)立的引入配置文件也有兩種方式，一種是通過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 加載完畢時(shí)，會(huì)自動(dòng)去加載配置文件 app.js。

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

通過 data-main 去加載入口文件，便會(huì)使配置對(duì)象中的 baseUrl 屬性默認(rèn)指向地址改為 app.js 所在的位置，相比之下我更加推薦這種方式，因?yàn)樗赡艿姆奖憧旖荨?/p>

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

注意：你在main.js中所設(shè)置的腳本是異步加載的。所以如果你在頁(yè)面中配置了其它JS加載，則不能保證它們所依賴的JS已經(jīng)加載成功。

常用參數(shù)配置

urlArgs

RequireJS獲取資源時(shí)附加在URL后面的額外的query參數(shù)。作為瀏覽器或服務(wù)器未正確配置時(shí)的“cache bust”手段很有用。使用cache bust配置的一個(gè)示例：
javascript:;urlArgs: "bust=" + (new Date()).getTime()
在開發(fā)中這很有用，但請(qǐng)記得在部署到生成環(huán)境之前移除它。

deps

用于聲明require.js在加載完成時(shí)便會(huì)自動(dòng)加載的模塊，值是一個(gè)數(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項(xiàng)目

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");
});

聲明：本網(wǎng)頁(yè)內(nèi)容旨在傳播知識(shí)，若有侵權(quán)等問題請(qǐng)及時(shí)與本網(wǎng)聯(lián)系，我們將在第一時(shí)間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com

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

推薦度：

點(diǎn)擊下載本文 文檔為doc格式

標(biāo)簽： VUE 的方法 vue-router

熱門焦點(diǎn)

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

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

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

最新推薦

猜你喜歡

熱門推薦