index.html 入口页面
<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title>vue</title> <link href="../css/index.css" rel="stylesheet"> <script src="../dist/js/requirejs-2.1.22.js"></script> <script src="../js/common/base.js"></script></head><body> <div class="panel" id="app"> <div class="panel-left"> <ul class="menus"> <li v-for="menu in menus"><a v-on:click="switchPage(menu)">`menu`.`name`</a></li> </ul> </div><!-- panel-left --> <div class="panel-right"> <router-view></router-view> </div> </div><!-- panel --></body></html>
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 } }});
随时随地看视频
