requireJs中引入vue-router

時間 2020-06-11

標籤 requirejs 引入 vue router 欄目 JavaScript 简体版

原文原文鏈接

requireJs簡介

參數配置

requireJS 經常使用的方法與命令也就兩個，所以requireJS使用起來很是簡單。
require
define
其中define是用於定義模塊，而require是用於載入模塊以及載入配置文件。javascript

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

加載配置文件

獨立的引入配置文件也有兩種方式，一種是經過script標籤加載外部JS文件形式：html

<script src="js/require.js"></script>
<script src="js/app.js"></script>

另外一種方式則是使用 require 提供的 data-main 屬性，該屬性是直接寫在引入require.js的script標籤上，在require.js 加載完畢時，會自動去加載配置文件 app.js。vue

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

經過 data-main 去加載入口文件，便會使配置對象中的 baseUrl 屬性默認指向地址改成 app.js 所在的位置，相比之下我更加推薦這種方式，由於它更可能的方便快捷。java

<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()
在開發中這頗有用，但請記得在部署到生成環境以前移除它。jquery

deps

用於聲明require.js在加載完成時便會自動加載的模塊，值是一個數組，數組元素即是模塊名。vue-router

config

config屬性能夠爲模塊配置額外的參數設定，其使用格式就是以模塊名或者模塊ID爲key，而後具體的參數爲value。vuex

shim

shim爲那些沒有使用define()來聲明依賴關係、設置模塊的"瀏覽器全局變量注入"型腳本作依賴和導出配置。bootstrap

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.jsapi

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

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。