Vue.js + Seajs 實例（包含vue-router使用）

這個Demo 相關JS：

　　Sea.js : Version 2.3.0

　　seajs-text :  Version 2.3.0

　　vue.js : Version 1.0.24

　　vue-router: Version 0.7.10

　　jquery: Version 1.0.24

特別是 seaj-text,一定需要引用，否則，require 相關HTML文件會報錯。

結構圖如下：

　　index.html 核心代碼如下

<div id="app">
    <menu>

    </menu>

    <router-view>

    </router-view>
</div>

<script type="text/javascript">

    seajs.config({
        base:"./static",
        charset:'utf-8',
        map:[],
        paths:{}
    });

    $(function(){
       seajs.use(["js/app.js"]);
    });
</script>

 　app.js 設定路由，默認啟動的js.

define(function(require,exports,module){
    require("js/components/menu.js");

    /* 路由器需要一個根組件*/
    var App=Vue.extend({});

    //創建一個路由器實例
    var router=new VueRouter();

    router.map({
        '/':{
            component:function(resolve){
                require.async(['js/modules/Index.js'],resolve);
            }
        },
        '/teacher/:params1/:params2':{
            /*name:"teacher",*/
            component:function(resolve){
                require.async(['js/modules/teacher.js'],resolve);
            }
        },
        '/student':{
            component: function (resolve) {
                require.async(['js/modules/student.js'],resolve);
            }
        }
    });

    router.start(App,'html');
    router.afterEach(function(transition){
        console.log(transition.to.path);
    });
});

 　在modules 下面的js負責相關邏輯，比如顯示界面，

define(function (require, exports, module) {
    var sTpl = require('templates/student.html');

    require("js/components/myCom.js");

    var vueComponent = Vue.extend({
        template: sTpl,
        attached: function () {
            var t = this;
            $("#btn1").click(function () {
                t.msg="dom change"
            });
            
        },
        methods:function(){

        },
        data:function(){
            return{
                msg:"Bar page",
                myComData:"自定義組件的數據"
            }
        }
    });

    module.exports=vueComponent;
});

　　student.html代碼如下

<div>
    <h3>this bar page</h3>
    <div>
        {{msg}}
    </div>
    <my-com></my-com>
</div>

　　其中  <my-com></my-com> 是自定義組件，代碼如下：

define(function(require,exports,modul){
    Vue.component('myCom',Vue.extend({
        template:'<h1>我的自定義組件</h1>'+
        '<p>' +
        '      {{myComData}}' +
            '<button v-on:click="myCommonBtnClick">自定義組件</button>'+
        '</p>',
        replace:true,
        data:function(){
            return{
                myComData:"初始化自定義組件值"
            }
        },
        methods:{
            myCommonBtnClick:function(){
                this.myComData="改變后自定義組件值";
            }
        }
    }));
});

　  整個運行效果圖如下：

　　

　  整個代碼點擊這里可下載，如果用 webStrom啟動，則不需要配置服務器。