requirejs vue vue.router简单框架

index.html 入口页面

                                                            `menu`.`name`                                                    

base.js requirejs 配置文件

(function(){    requirejs.config({        baseUrl: "../js",        paths:{            "promise":"../dist/js/q",            "vue":"../dist/js/vue",            "vue.router":"../dist/js/vue-router.min",            "text":"../dist/js/text",            "css":"../dist/js/css.min"        },        waitSeconds: 15,        map:{        },        urlArgs: "version=" + Date.now(),        shim: {            promise:{                exports:"Q"            },            "vue": {                exports: "Vue"            },            "vue.router": {                exports: "VueRouter"            }        },        callback:function(){        },        deps:["vue","vue.router","promise","index"] // 默认要加载的js    });})();

index.js vue 入口

define(["vue","vue.router","common/routes"], function(Vue,VueRouter,routes) {    Vue.use(VueRouter);    var data = {        menus: [            {path: "/account", name: "账户管理"},            {path: "/authorization", name: "权限管理"},            {path: "/member", name: "会员管理"}        ]    };    var router = new VueRouter({        routes:routes    });    var methods = {        switchPage:function(menu){            console.log(menu);            this.$router.push(menu.path);        }    };    var app = new Vue({        router:router,        el:"#app",        data:data,        methods:methods    });});

routes.js 路由配置

define(["common/ResolveComponent"], function(ResolveComponent) {    var routes = [];    routes.push({        path: '/account',        component: ResolveComponent("account/account_index")    });    routes.push({        path: '/authorization',        component: ResolveComponent("authorization/authorization_index")    });    routes.push({        path: '/member',        component: ResolveComponent("member/member_index")    });    return routes;});

ResolveComponent.js  component懒加载工具

define(["require","promise"], function(require,Q) {    var resolve = function(dependency){        return function(){            if(!(dependency instanceof Array)){                dependency = [dependency];            }            var deferred = Q.defer();            require(dependency,function(res){                deferred.resolve(res);            });            return deferred.promise;        }    };    return resolve;});

account_index.js

define(["text!../../pages/account/account_index.html","css!../../css/account/account_index.css"], function(template) {    var data = {        list:[            {id:"001",name:"小王"},            {id:"002",name:"大王"},            {id:"003",name:"老王"}        ]    };    var methods = {        say:function(item){            alert("我居然是"+item.name);        }    };    return {        methods:methods,        template:template,        data:function(){            return data        }    }});