页面路由，组件拆分

build/copy.project-deps.js

@@ -18,4 +18,5 @@ function copy(copytype = 'src', support = config.support()) {
     }
 }
 
-module.exports = copy;
\ No newline at end of file
+module.exports = copy;
+copy()
\ No newline at end of file

build/map.project-deps.js

@@ -14,6 +14,6 @@ module.exports = {
   // vue
   "vue/vue.js": m("vue/dist/vue.js", "vue/dist/vue.min.js"),
   "vue/vue-router.js": m("vue-router/dist/vue-router.js", "vue-router/dist/vue-router.min.js"),
-  "vue/vue-class-component": m("vue-class-component/dist/vue-class-component.js", "vue-class-component/dist/vue-class-component.min.js"),
-  "vue/vue-property-decorator": m("node_modules/vue-property-decorator/lib/vue-property-decorator.umd.js"),
+  "vue/vue-class-component.js": m("vue-class-component/dist/vue-class-component.js", "vue-class-component/dist/vue-class-component.min.js"),
+  "vue/vue-property-decorator.js": m("vue-property-decorator/lib/vue-property-decorator.umd.js"),
 };
\ No newline at end of file

src/@esm.amd/vue-router.esm.js

+define(['exports', 'vue-router-cmd'], function (exports, vue) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+    exports.default = vue;
+})
\ No newline at end of file

src/@esm.amd/vue.esm.js

+define(['exports', 'vue-cmd'], function (exports, vue) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+    exports.default = vue;
+})
\ No newline at end of file

src/app/App.ts

@@ -16,7 +16,7 @@ Vue.use(VueRouter);
 new Vue({
     el: '#app',
     router: new VueRouter({
-        mode: "history",
+        // mode: "history",
         base: "/",
         routes: routes,
     }),

src/app/common/api/api.ts

+let id = 0;
+const gen = {
+    get id() {
+        return ++id;
+    },
+};
+
+const menuTree = [
+    {
+        id: gen.id,
+        moduleUrl: '',
+        moduleName: '用户管理',
+        moduleDescribe: '管理用户数据',
+        moduleSequence: 1,
+        childList: [
+            {
+                id: gen.id,
+                moduleUrl: '',
+                moduleName: '用户管理',
+                moduleDescribe: '用户列表数据',
+                moduleSequence: 1,
+                childList: [
+                    {
+                        id: gen.id,
+                        moduleUrl: 'user/normalList',
+                        moduleName: '用户列表',
+                        moduleDescribe: '用户信息一览',
+                        moduleSequence: 1,
+                        childList: [],
+                    },
+                    {
+                        id: gen.id,
+                        moduleUrl: 'user/businessList',
+                        moduleName: '商家用户',
+                        moduleDescribe: '商家用户管理',
+                        moduleSequence: 2,
+                        childList: [],
+                    },
+                    {
+                        id: gen.id,
+                        moduleUrl: 'user/blackList',
+                        moduleName: '黑名单',
+                        moduleDescribe: '黑名单用户管理',
+                        moduleSequence: 3,
+                        childList: [],
+                    },
+                ],
+            },
+        ],
+    },
+    {
+        id: gen.id,
+        moduleUrl: '',
+        moduleName: '订单管理',
+        moduleDescribe: '管理订单数据',
+        moduleSequence: 2,
+        childList: [
+            {
+                id: gen.id,
+                moduleUrl: '',
+                moduleName: '订单管理',
+                moduleDescribe: '订单信息管理',
+                moduleSequence: 3,
+                childList: [
+                    {
+                        id: gen.id,
+                        moduleUrl: 'order/normalList',
+                        moduleName: '订单列表',
+                        moduleDescribe: '订单信息查看',
+                        moduleSequence: 3,
+                        childList: [],
+                    },
+                    {
+                        id: gen.id,
+                        moduleUrl: 'order/overList',
+                        moduleName: '已完成订单',
+                        moduleDescribe: '已完成订单查看',
+                        moduleSequence: 3,
+                        childList: [],
+                    },
+                ],
+            },
+            {
+                id: gen.id,
+                moduleUrl: '',
+                moduleName: '订单审核',
+                moduleDescribe: '审核管理',
+                moduleSequence: 3,
+                childList: [
+                    {
+                        id: gen.id,
+                        moduleUrl: 'order/verifyList',
+                        moduleName: '审核列表',
+                        moduleDescribe: '查看/审核订单',
+                        moduleSequence: 3,
+                        childList: [],
+                    },
+                ],
+            },
+        ],
+    },
+    {
+        id: gen.id,
+        moduleUrl: '',
+        moduleName: '系统管理',
+        moduleDescribe: '管理系统配置信息',
+        moduleSequence: 3,
+        childList: [
+            {
+                id: gen.id,
+                moduleUrl: '',
+                moduleName: '权限管理',
+                moduleDescribe: '调整权限配置信息',
+                moduleSequence: 3,
+                childList: [
+                    {
+                        id: gen.id,
+                        moduleUrl: 'menu/menuList',
+                        moduleName: '菜单列表',
+                        moduleDescribe: '调整菜单配置信息',
+                        moduleSequence: 3,
+                        childList: [],
+                    },
+                    {
+                        id: gen.id,
+                        moduleUrl: 'role/roleList',
+                        moduleName: '角色列表',
+                        moduleDescribe: '角色管理',
+                        moduleSequence: 3,
+                        childList: [],
+                    },
+                    {
+                        id: gen.id,
+                        moduleUrl: 'account/accountList',
+                        moduleName: '帐号列表',
+                        moduleDescribe: '帐号管理',
+                        moduleSequence: 3,
+                        childList: [],
+                    },
+                ],
+            },
+            {
+                id: gen.id,
+                moduleUrl: '',
+                moduleName: '配置管理',
+                moduleDescribe: '调整系统配置信息',
+                moduleSequence: 3,
+                childList: [
+                    {
+                        id: gen.id,
+                        moduleUrl: 'config/localConfigList',
+                        moduleName: '配置列表',
+                        moduleDescribe: '配置管理',
+                        moduleSequence: 3,
+                        childList: [],
+                    },
+                ],
+            },
+            {
+                id: gen.id,
+                moduleUrl: '',
+                moduleName: '第三方配置管理',
+                moduleDescribe: '调整第三方配置信息',
+                moduleSequence: 3,
+                childList: [
+                    {
+                        id: gen.id,
+                        moduleUrl: 'config/thirdConfigList/AliyunOSS',
+                        moduleName: '阿里云配置',
+                        moduleDescribe: '阿里云配置调整',
+                        moduleSequence: 3,
+                        childList: [],
+                    },
+                    {
+                        id: gen.id,
+                        moduleUrl: 'config/thirdConfigList/QiniuCloud',
+                        moduleName: '七牛云配置',
+                        moduleDescribe: '七牛云配置调整',
+                        moduleSequence: 3,
+                        childList: [],
+                    },
+                ],
+            },
+            {
+                id: gen.id,
+                moduleUrl: '',
+                moduleName: '日志管理',
+                moduleDescribe: '查看日志信息',
+                moduleSequence: 3,
+                childList: [
+                    {
+                        id: gen.id,
+                        moduleUrl: 'log/logList',
+                        moduleName: '日志列表',
+                        moduleDescribe: '日志管理',
+                        moduleSequence: 3,
+                        childList: [],
+                    },
+                ],
+            },
+        ],
+    },
+];
+
+const menuData = [];
+
+function tiling(parent = {id: 0, childList: menuTree}) {
+    parent.childList.forEach(m => {
+        const {id, moduleUrl, moduleName, moduleDescribe, moduleSequence} = m;
+        menuData.push({
+            id, moduleUrl, moduleName, moduleDescribe, moduleSequence,
+            parentId: parent.id,
+        });
+        tiling(m);
+    });
+}
+
+tiling();
+
+export function menuList({parentId = 0}) {
+    return {code: 200, data: menuData.filter(m => m.parentId === parentId).map(m => ({...m}))};
+}
\ No newline at end of file

src/app/components/main/main.css

+.page-root {
+    display: flex;
+    flex-flow: column nowrap;
+    height: 100%;
+    width: 100%;
+    background-color: #e5edef;
+}
+
+.page-head {
+    display: flex;
+    flex-flow: row nowrap;
+    height: 35px;
+    padding: 0 5px;
+    background: #1871dd;
+}
+
+.page-body {
+    margin: 5px;
+    flex-grow: 1;
+    display: flex;
+    flex-flow: row nowrap;
+}
+
+.page-body-left {
+    display: flex;
+    flex-direction: column;
+    background-color: #e8f2fd;
+    border: #4875a4 1px solid;
+    width: 200px;
+}
+
+.page-body-right {
+    margin-left: 5px;
+    background-color: #efefef;
+    flex-grow: 1;
+}
+
+.route-content {
+    display: flex;
+    flex-direction: column;
+    flex-wrap: nowrap;
+}
+
+.route-path {
+
+}
+
+.route-template {
+    flex-grow: 1;
+}

src/app/components/main/main.html

-<div>this page is main</div>
\ No newline at end of file
+<div>
+    <div class="page-head">
+        <PageHeadNav
+                v-for="(ttm, tdx) in tabMenus"
+                :key="tdx"
+                :name="ttm.moduleName"
+                :desc="ttm.moduleDescribe"
+                :selected="ttm.id === curTabMenuId"
+                @select="tapNav(ttm.id)"
+        >
+        </PageHeadNav>
+    </div>
+    <div class="page-body">
+        <div class="page-body-left">
+            <SubMenuNav
+                    v-for="(stm, sdx) in subMenus"
+                    :key="sdx"
+                    :name="stm.moduleName"
+                    :desc="stm.moduleDescribe"
+                    :selected="stm.id === curSubMenuId"
+                    @select="tapSubNav(stm.id)"
+            >
+                <RouteMenuNav
+                        v-for="(rtm, rdx) in routeMenus"
+                        :key="rdx"
+                        :name="rtm.moduleName"
+                        :desc="rtm.moduleDescribe"
+                        :selected="rtm.id === curRouteMenuId"
+                        @select="tapRouteNav(rtm)">
+                </RouteMenuNav>
+            </SubMenuNav>
+        </div>
+        <div class="page-body-right">
+            <div class="route-history-bar">
+                <div class="route-history-item"></div>
+            </div>
+            <keep-alive>
+                <router-view v-if="$route.meta.keepAlive"></router-view>
+            </keep-alive>
+            <router-view v-if="!$route.meta.keepAlive"></router-view>
+            <!--<router-view></router-view>-->
+        </div>
+    </div>
+</div>

src/app/components/main/main.ts

 import Vue from 'vue';
-import { Component } from "vue-property-decorator";
+import {Component, Watch} from "vue-property-decorator";
+import * as api from "../../common/api/api";
 /// @ts-ignore
 import template = require("text!./main.html");
-/* import "css!.main.css"; */
+import "css!./main.css";
+import {MenuProto} from "../../model/MenuProto";
+import PageHeadNav from "../page-head-nav/page-head-nav";
+import SubMenuNav from "../sub-menu-nav/sub-menu-nav";
+import RouteMenuNav from "../route-menu-nav/route-menu-nav";
+
+let routesUnique = [];
 
 @Component({
-    name: 'main',
-    template: template
+    // name: 'main',
+    template: template,
+    components: {
+        PageHeadNav,
+        SubMenuNav,
+        RouteMenuNav,
+    }
 })
 export default class Main extends Vue {
+    curTabMenuId: number = 0;
+    curSubMenuId: number = 0;
+    curRouteMenuId: number = 0;
+    tabMenus: MenuProto[] = [];
+    subMenus: MenuProto[] = [];
+    routeMenus: MenuProto[] = [];
+
+    async mounted() {
+        let res = await api.menuList({parentId: 0});
+
+        this.tabMenus = res && res.data || [{}];
+        if (this.tabMenus.length) {
+            this.curTabMenuId = this.tabMenus[0].id;
+        }
+    }
+
+    @Watch('curTabMenuId')
+    async onCurTabMenuIdChange(newId) {
+        this.subMenus = [];
+        this.routeMenus = [];
+        let res = await api.menuList({parentId: newId});
+
+        this.subMenus = res && res.data || [];
+        if (this.subMenus.length) {
+            this.curSubMenuId = this.subMenus[0].id;
+        }
+    }
+
+    @Watch('curSubMenuId')
+    async onCurSubMenuIdChange(newId) {
+        this.routeMenus = [];
+        let sdx = this.subMenus.findIndex(s => s.id === newId);
+        let subMenu = this.subMenus[sdx];
+
+        if (subMenu.routeMenus && subMenu.routeMenus.length) {
+            this.routeMenus = subMenu.routeMenus;
+            return;
+        }
+        let res = await api.menuList({parentId: newId});
+
+        this.routeMenus = res && res.data || [];
+        subMenu.routeMenus = this.routeMenus;
+    }
+
+    tapNav(menuId) {
+        this.curTabMenuId = menuId;
+        console.log(menuId);
+    }
+
+    tapSubNav(menuId) {
+        this.curSubMenuId = menuId;
+        console.log(menuId);
+    }
+
+    async tapRouteNav({id: menuId, moduleUrl}) {
+        if (this.curRouteMenuId === menuId) {
+            // todo: 这里做当前页面刷新的处理，emit或者notify
+            return;
+        }
+        this.curRouteMenuId = menuId;
+        console.log(menuId);
+
+        const routeName = `route_${menuId}`;
+
+        // 如果是第一次调用，这里会动态注册路由
+        await this.routeRegister({
+            id: menuId,
+            url: moduleUrl,
+            name: routeName,
+            ns: [this.curTabMenuId, this.curSubMenuId, menuId],
+        });
+        // 跳转路由
+        await this.$router.push({name: routeName});
+    }
+
+
+    parseModulePath(modulePath) {
+        // todo：这里可以指定哪些页面是path参数的，这个配置需要从文件中分离
+        const cfg = [
+            '/config/thirdConfigList',
+        ];
+        for (let match of cfg) {
+            if (modulePath.indexOf(match) === 0) {
+                modulePath = match;
+            }
+        }
+        return `/app/pages${modulePath}/${modulePath.split(/\//g).pop()}.js`;
+    };
+
+    async routeRegister({id: menuId, url, name, ns}) {
+        if (routesUnique.indexOf(menuId) > -1) {
+            return;
+        }
+        routesUnique.push(menuId);
+
+        const path = `${url.replace(/^(\/|)/, '/')}${url.indexOf('?') > -1 ? '&' : '?'}rel=${ns.join('.')}`;
+
+        const modulePath = path.split('?')[0];
+        const moduleUrl = this.parseModulePath(modulePath);
+
+        console.log(modulePath);
+        console.log(moduleUrl);
+
+        // 使用import()动态加载component
+        const moduleObject = await import(moduleUrl);
+
+        this.$router.addRoutes([{
+            path,
+            name,
+            component: {
+                data() {
+                    // todo 我不知道为什么每次切换route这个extendStamp会刷新
+                    return {extendStamp: Date.now()}
+                },
+                render(h) {
+                    return h(
+                        'div',
+                        {'class': {'route-content': true}},
+                        [
+                            // @ts-ignore
+                            h('div', {'class': {'route-path': true}}, `path: ${path}, ${this.extendStamp}`),
+                            h('div', {'class': {'route-template': true}},
+                                moduleObject ? [h(moduleObject.default)] : [`Not Found: ${moduleUrl}`],
+                            ),
+                        ],
+                    );
+                },
+            },
+            meta: {
+                keepAlive: true, //需要被缓存的组件
+            },
+        }]);
+    }
 }
\ No newline at end of file

src/app/components/page-head-nav/page-head-nav.css

+.page-head-nav {
+    font-weight: 700;
+    margin-top: 4px;
+    height: 27px;
+    line-height: 27px;
+    font-size: 14px;
+    padding: 0 15px;
+    border-radius: 5px;
+    color: #ffffff;
+    cursor: pointer;
+}
+
+.page-head-nav.selected {
+    color: #5198d1;
+    background: #e5edef;
+}
\ No newline at end of file

src/app/components/page-head-nav/page-head-nav.html

+<div class="page-head-nav"
+     :class="{'selected': selected}"
+     :title="desc">
+    <span @click.stop="$emit('select')">{{name}}</span>
+</div>
\ No newline at end of file

src/app/components/page-head-nav/page-head-nav.ts

+import Vue from 'vue';
+import {Component, Prop} from "vue-property-decorator";
+import "css!./page-head-nav.css";
+
+@Component({
+    // name: 'page-head-nav',
+    template: `
+<div class="page-head-nav"
+     :class="{'selected': selected}"
+     :title="desc">
+    <span @click.stop="$emit('select')">{{name}}</span>
+</div>`
+})
+export default class PageHeadNav extends Vue {
+    @Prop({type: String, required: true}) name!: string;
+    @Prop({type: String, required: true}) desc!: string;
+    @Prop({type: Boolean, default: false}) selected!: boolean;
+}
\ No newline at end of file

src/app/components/route-menu-nav/route-menu-nav.css

+.route-menu-nav {
+    padding-left: 5px;
+}
+
+.route-menu-nav.selected {
+    background: #eeeeee;
+}

src/app/components/route-menu-nav/route-menu-nav.html

+<div class="route-menu-nav"
+     :class="{'selected': selected}"
+     :title="desc">
+    <span @click.stop="$emit('select')">{{name}}</span>
+</div>
\ No newline at end of file

src/app/components/route-menu-nav/route-menu-nav.ts

+import Vue from 'vue';
+import {Component, Prop} from "vue-property-decorator";
+import "css!./route-menu-nav.css";
+
+@Component({
+    // name: 'route-menu-nav',
+    template: `
+<div class="route-menu-nav"
+     :class="{'selected': selected}"
+     :title="desc">
+    <span @click.stop="$emit('select')">{{name}}</span>
+</div>`
+})
+export default class RouteMenuNav extends Vue {
+    @Prop({type: String, required: true}) name!: string;
+    @Prop({type: String, required: true}) desc!: string;
+    @Prop({type: Boolean, default: false}) selected!: boolean;
+}
\ No newline at end of file

src/app/components/sub-menu-nav/sub-menu-nav.css

+.sub-menu-nav {
+    display: flex;
+    flex-direction: column;
+    flex-grow: 0;
+    transition: all .5s;
+}
+
+.sub-menu-nav span {
+    width: 100%;
+    overflow: hidden;
+    display: block;
+    padding-left: 5px;
+    height: 25px;
+    font-size: 12px;
+    line-height: 24px;
+    flex-grow: 0;
+}
+
+.sub-menu-nav-title {
+    border: rgb(148, 165, 185) solid 1px;
+    box-shadow: inset 0 0 2px 1px rgba(148, 165, 185, .5);
+}
+
+.sub-menu-nav.selected {
+    flex-grow: 1;
+}
+
+.sub-menu-nav.selected .sub-menu-nav-title {
+    background: #b4d2f7;
+}
+
+.sub-menu-nav.selected > span {
+    color: #ffffff;
+}
+
+.route-menu-bar::-webkit-scrollbar {
+    display: none;
+}
+
+.route-menu-bar {
+    flex-grow: 1;
+    overflow-y: scroll;
+    overflow-x: hidden;
+}
\ No newline at end of file

src/app/components/sub-menu-nav/sub-menu-nav.html

+<div class="sub-menu-nav"
+     :class="{'selected': selected}"
+     :title="desc">
+    <div class="sub-menu-nav-title">
+        <span @click.stop="$emit('select')">{{name}}</span>
+    </div>
+    <div class="route-menu-bar" v-if="selected">
+        <slot></slot>
+    </div>
+</div>
\ No newline at end of file

src/app/components/sub-menu-nav/sub-menu-nav.ts

+import Vue from 'vue';
+import {Component, Prop} from "vue-property-decorator";
+import "css!./sub-menu-nav.css";
+
+@Component({
+    // name: 'sub-menu-nav',
+    template: `
+<div class="sub-menu-nav"
+     :class="{'selected': selected}"
+     :title="desc">
+    <div class="sub-menu-nav-title">
+        <span @click.stop="$emit('select')">{{name}}</span>
+    </div>
+    <div class="route-menu-bar" v-if="selected">
+        <slot></slot>
+    </div>
+</div>`
+})
+export default class SubMenuNav extends Vue {
+    @Prop({type: String, required: true}) name!: string;
+    @Prop({type: String, required: true}) desc!: string;
+    @Prop({type: Boolean, default: false}) selected!: boolean;
+}
\ No newline at end of file

src/app/components/table/table.ts

@@ -2,10 +2,10 @@ import Vue from 'vue';
 import { Component } from "vue-property-decorator";
 /// @ts-ignore
 import template = require("text!./table.html");
-/* import "css!.table.css"; */
+/* import "css!./table.css"; */
 
 @Component({
-    name: 'table',
+    // name: 'table',
     template: template
 })
 export default class Table extends Vue {

src/app/model/MenuProto.ts

+export class MenuProto {
+    id: number = 0;
+    moduleUrl: string = '';
+    moduleName: string = '';
+    moduleDescribe: string = '';
+    moduleSequence: number = 0;
+    routeMenus: MenuProto[] = [];
+}
\ No newline at end of file

src/app/pages/account/accountList/accountList.ts

@@ -2,10 +2,10 @@ import Vue from 'vue';
 import { Component } from "vue-property-decorator";
 /// @ts-ignore
 import template = require("text!./accountList.html");
-/* import "css!.accountList.css"; */
+/* import "css!./accountList.css"; */
 
 @Component({
-    name: 'account-account-list',
+    // name: 'account-account-list',
     template: template
 })
 export default class AccountList extends Vue {

src/app/pages/config/localConfigList/localConfigList.ts

@@ -2,10 +2,10 @@ import Vue from 'vue';
 import { Component } from "vue-property-decorator";
 /// @ts-ignore
 import template = require("text!./localConfigList.html");
-/* import "css!.localConfigList.css"; */
+/* import "css!./localConfigList.css"; */
 
 @Component({
-    name: 'config-local-config-list',
+    // name: 'config-local-config-list',
     template: template
 })
 export default class LocalConfigList extends Vue {

src/app/pages/config/thirdConfigList/thirdConfigList.html

-<div>this page is config/thirdConfigList</div>
\ No newline at end of file
+<div>
+    <div>this page is config/thirdConfigList</div>
+    <div>
+        <button @click.stop="add()">+</button>
+        <input type="text" :value="num"/>
+        <button @click.stop="sub()">-</button>
+    </div>
+</div>
\ No newline at end of file

src/app/pages/config/thirdConfigList/thirdConfigList.ts

@@ -2,11 +2,20 @@ import Vue from 'vue';
 import { Component } from "vue-property-decorator";
 /// @ts-ignore
 import template = require("text!./thirdConfigList.html");
-/* import "css!.thirdConfigList.css"; */
+/* import "css!./thirdConfigList.css"; */
 
 @Component({
-    name: 'config-third-config-list',
+    // name: 'config-third-config-list',
     template: template
 })
 export default class ThirdConfigList extends Vue {
+    public num: number = 0;
+
+    add() {
+        this.num ++;
+    }
+
+    sub() {
+        this.num --;
+    }
 }
\ No newline at end of file

src/app/pages/log/logList/logList.ts

@@ -2,10 +2,10 @@ import Vue from 'vue';
 import { Component } from "vue-property-decorator";
 /// @ts-ignore
 import template = require("text!./logList.html");
-/* import "css!.logList.css"; */
+/* import "css!./logList.css"; */
 
 @Component({
-    name: 'log-log-list',
+    // name: 'log-log-list',
     template: template
 })
 export default class LogList extends Vue {

src/app/pages/menu/menuList/menuList.ts

@@ -2,10 +2,10 @@ import Vue from 'vue';
 import { Component } from "vue-property-decorator";
 /// @ts-ignore
 import template = require("text!./menuList.html");
-/* import "css!.menuList.css"; */
+/* import "css!./menuList.css"; */
 
 @Component({
-    name: 'menu-menu-list',
+    // name: 'menu-menu-list',
     template: template
 })
 export default class MenuList extends Vue {

src/app/pages/order/normalList/normalList.ts

@@ -2,10 +2,10 @@ import Vue from 'vue';
 import { Component } from "vue-property-decorator";
 /// @ts-ignore
 import template = require("text!./normalList.html");
-/* import "css!.normalList.css"; */
+/* import "css!./normalList.css"; */
 
 @Component({
-    name: 'order-normal-list',
+    // name: 'order-normal-list',
     template: template
 })
 export default class NormalList extends Vue {

src/app/pages/order/overList/overList.ts

@@ -2,10 +2,10 @@ import Vue from 'vue';
 import { Component } from "vue-property-decorator";
 /// @ts-ignore
 import template = require("text!./overList.html");
-/* import "css!.overList.css"; */
+/* import "css!./overList.css"; */
 
 @Component({
-    name: 'order-over-list',
+    // name: 'order-over-list',
     template: template
 })
 export default class OverList extends Vue {

src/app/pages/order/verifyList/verifyList.ts

@@ -2,10 +2,10 @@ import Vue from 'vue';
 import { Component } from "vue-property-decorator";
 /// @ts-ignore
 import template = require("text!./verifyList.html");
-/* import "css!.verifyList.css"; */
+/* import "css!./verifyList.css"; */
 
 @Component({
-    name: 'order-verify-list',
+    // name: 'order-verify-list',
     template: template
 })
 export default class VerifyList extends Vue {

src/app/pages/role/roleList/roleList.ts

@@ -2,10 +2,10 @@ import Vue from 'vue';
 import { Component } from "vue-property-decorator";
 /// @ts-ignore
 import template = require("text!./roleList.html");
-/* import "css!.roleList.css"; */
+/* import "css!./roleList.css"; */
 
 @Component({
-    name: 'role-role-list',
+    // name: 'role-role-list',
     template: template
 })
 export default class RoleList extends Vue {

src/app/pages/user/blackList/blackList.ts

@@ -2,10 +2,10 @@ import Vue from 'vue';
 import { Component } from "vue-property-decorator";
 /// @ts-ignore
 import template = require("text!./blackList.html");
-/* import "css!.blackList.css"; */
+/* import "css!./blackList.css"; */
 
 @Component({
-    name: 'user-black-list',
+    // name: 'user-black-list',
     template: template
 })
 export default class BlackList extends Vue {

src/app/pages/user/businessList/businessList.ts

@@ -2,10 +2,10 @@ import Vue from 'vue';
 import { Component } from "vue-property-decorator";
 /// @ts-ignore
 import template = require("text!./businessList.html");
-/* import "css!.businessList.css"; */
+/* import "css!./businessList.css"; */
 
 @Component({
-    name: 'user-business-list',
+    // name: 'user-business-list',
     template: template
 })
 export default class BusinessList extends Vue {

src/app/pages/user/normalList/normalList.html

-<div>this page is user/normalList</div>
\ No newline at end of file
+<div>
+    <div>this page is user/normalList</div>
+    <div>
+        <button @click.stop="add()">+</button>
+        <input type="text" :value="num"/>
+        <button @click.stop="sub()">-</button>
+    </div>
+</div>
\ No newline at end of file

src/app/pages/user/normalList/normalList.ts

 import Vue from 'vue';
-import { Component } from "vue-property-decorator";
+import {Component, Model, Prop} from "vue-property-decorator";
 /// @ts-ignore
 import template = require("text!./normalList.html");
-/* import "css!.normalList.css"; */
+/* import "css!./normalList.css"; */
 
 @Component({
-    name: 'user-normal-list',
+    // name: 'user-normal-list',
     template: template
 })
 export default class NormalList extends Vue {
+    public num: number = 0;
+
+    add() {
+        this.num ++;
+    }
+
+    sub() {
+        this.num --;
+    }
 }
\ No newline at end of file

src/require.config.js

-define({
-    paths: {
-        'tslib': '@libs/ts/tslib',
-        'vue': '@libs/vue/vue',
-        'vue-router': '@libs/vue/vue-router',
-        'vue-class-component': '@libs/vue/vue-class-component',
-        'vue-property-decorator': '@libs/vue/vue-property-decorator',
-        'App': 'app/App',
-    },
-    map: {
-        '*': {
-            'css': '@libs/requirejs/require-css',
-            'text': '@libs/requirejs/require-text',
+define(function () {
+    require.config({
+        paths: {
+            'tslib': '@libs/ts/tslib',
+            'vue': '@esm.amd/vue.esm',
+            'vue-cmd': '@libs/vue/vue',
+            'vue-router': '@esm.amd/vue-router.esm',
+            'vue-router-cmd': '@libs/vue/vue-router',
+            'vue-class-component': '@libs/vue/vue-class-component',
+            'vue-property-decorator': '@libs/vue/vue-property-decorator',
         },
-    },
+        map: {
+            '*': {
+                'css': '@libs/requirejs/require-css',
+                'text': '@libs/requirejs/require-text',
+            },
+        },
+    });
 });
\ No newline at end of file