vue系列之requireJs中引入vue-router

最新推荐文章于 2024-02-22 13:45:31 发布

weixin_33912445

最新推荐文章于 2024-02-22 13:45:31 发布

阅读量1.2k

点赞数

文章标签： javascript ViewUI

原文链接：https://segmentfault.com/a/1190000015669251

版权

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。

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