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"); });
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持小牛知识库。
Vue Router 是 Vue.js 官方的路由管理器。它和 Vue.js 的核心深度集成,让构建单页面应用变得易如反掌。包含的功能有: 嵌套的路由/视图表 模块化的、基于组件的路由配置 路由参数、查询、通配符 基于 Vue.js 过渡系统的视图过渡效果 细粒度的导航控制 带有自动激活的 CSS class 的链接 HTML5 历史模式或 hash 模式,在 IE9 中自动降级 自定义的滚动条行
本文向大家介绍Vue-Router的使用方法,包括了Vue-Router的使用方法的使用技巧和注意事项,需要的朋友参考一下 使用 Vue.js 做项目的时候,一个页面是由多个组件构成的,所以在跳转页面的时候,并不适合用传统的 href,于是 vue-router 应运而生。 路由,其实就是指向的意思,当我点击页面上的home按钮时,页面中就要显示home的内容,如果点击页面上的about 按钮,页
本文向大家介绍在vue项目中引入vue-beauty操作方法,包括了在vue项目中引入vue-beauty操作方法的使用技巧和注意事项,需要的朋友参考一下 vue-beauty有丰富的vue组件库,使用vue-beauty方便项目的开发,下面介绍在vue项目中引入vue-beauty。 1、vue项目初始化 npm install --global vue-cl:全局安装vue脚手架vue ini
本文向大家介绍Vue系列:通过vue-router如何传递参数示例,包括了Vue系列:通过vue-router如何传递参数示例的使用技巧和注意事项,需要的朋友参考一下 使用vue-router 来实现webapp的页面跳转,有时候需要传递参数,做法如下: 参考文献:http://router.vuejs.org/en/named.html 主要有以下几个步骤: (1) 设置好路由配置 这里有2个关
本文向大家介绍使用vue-router在Vue页面之间传递数据的方法,包括了使用vue-router在Vue页面之间传递数据的方法的使用技巧和注意事项,需要的朋友参考一下 前言 几周前,我写了关于 Vue 路由的使用和在 Vue 页面导航的文章。这是在应用程序中探索的一个基本例子。 通常,在将导航构建到应用程序中时,您会发现需要将数据从一个页面传递到另一个页面。(不通顺)例如,您遵循 master
本文向大家介绍vue学习之Vue-Router用法实例分析,包括了vue学习之Vue-Router用法实例分析的使用技巧和注意事项,需要的朋友参考一下 本文实例讲述了vue学习之Vue-Router用法。分享给大家供大家参考,具体如下: Vue-router就像一个路由器,将组件(components)映射到路由(routes)后,通过点击<router-link>它可以在<router-view