vue系列之requireJs中引入vue-router的方法
requireJs簡介
參數(shù)配置
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中所設(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)容,希望對大家的學習有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
vue中子組件向父組件傳遞數(shù)據(jù)的實例代碼(實現(xiàn)加減功能)
這篇文章主要介紹了vue中子組件向父組件傳遞數(shù)據(jù)的實例代碼(實現(xiàn)加減功能) ,需要的朋友可以參考下2018-04-04如何使用el-table實現(xiàn)純前端導(dǎo)出(適用于el-table任意表格)
我們?nèi)粘W鲰椖?特別是后臺管理系統(tǒng),常常需要導(dǎo)出excel文件,這篇文章主要給大家介紹了關(guān)于如何使用el-table實現(xiàn)純前端導(dǎo)出的相關(guān)資料,本文適用于el-table任意表格,需要的朋友可以參考下2024-03-03解決前端調(diào)用后端接口返回200但數(shù)據(jù)返回的是html標簽
這篇文章主要給大家介紹了關(guān)于如何解決前端調(diào)用后端接口返回200但數(shù)據(jù)返回的是html標簽的相關(guān)資料,文中通過圖文將解決的過程介紹的非常詳細,對同樣遇到這個問題的朋友具有一定的參考解決價值,需要的朋友可以參考下2024-05-05