主要手段

主要手段是采用x-template的方式构建组件

相关文档

Vue官方文档非常详细，相关连接
vue
vuex
router

老项目引入规则

可由于历史遗留问题，很难使用vue的全部生态来开发 比如脚手架。而且这次只是修改两个模块，并非全局替换。

vue、vuex、vue-router的引入

之前的项目采用gulp打包，把vue.js、vue-router.js、vue.js、store.js打包进项目共用的js里面，目的是多个模块分别为多个vue应用，共用同一个store。配置文件如下：

"js_path": [
    "public/resource/js/shared/layout.js",
    "public/resource/js/templates/designs/pwin/layout.js",
    "public/assets/bower/vue/vue.js",
    "public/assets/bower/vue/vue-router.js",
    "public/assets/bower/vue/vuex.js",
    "public/resource/js/shared/vue_sports/store.js"
  ],

vue组件的使用

由于项目采用的是html、css、js文件分别存放的方式，不采用单文件组件模式，采用x-template的方式构建组件，将组件的js打包进模块引用的js中，利用Vue.component(“name”)获取组件。

组件模版

Js文件

(function () {
    Vue.component("banner", {
        template: "#banner",
        data: function () {
            return {
                show: true
            };
        },
        computed: {

        },
        methods: {

        }
    });
})();

html文件

<div class="partial_banner" v-show="show">
</div>

x-template引入

<script type="text/x-template" id="partial-filter">
    <%- partial('_banner') %>
</script>

组件引用

<banner></banner>

store

var store = new Vuex.Store({
    strict: true,
    state:{},
    getters:{},
    mutations:{},
    actions:{}
})

router

routes = [
                {path: '/', redirect: '/overview'},
                {
                    name: 'eventlist',
                    path: '/eventlist/:categoryname/:sportname/:competitionname',
                    component: Eventlist,
                    meta: {keepAlive: true}
                },
                {name: 'eventview', path: '/eventview', component: EventView, meta: {keepAlive: true}},
                {name: 'sportOverview', path: '/overview', component: OverView, meta: {keepAlive: true}},
                {path: '/favorite', component: FavoriteView, props: {type: 'favBox'}, meta: {keepAlive: false}},
                {
                    name: 'countryleague',
                    path: '/countryleague/:sportname/',
                    component: CountryLeague,
                    meta: {keepAlive: false}
                }
            ];

var router = new VueRouter({
    routes: routes
});

vue实例

var sportbook_vw = new Vue({
    el: '#sportbook-content',
    store: store,
    router: router
})；