index.html 入口页面

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<!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 配置文件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
( 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 入口

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
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 路由配置

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
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懒加载工具

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
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
         }
     }
 
});