index.html 入口頁面

<!DOCTYPE html><html><head lang="en">    <meta charset="UTF-8">    <title>vue</title>    <link href="../css/index.css" rel="stylesheet">    <script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="../dist/js/requirejs-2.1.22.js"></script>    <script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="../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        }    }});

requirejs vue vue.router簡單框架

相關文章