替换vue-class-component为vue-property-decorator，修正normal拼写错误

README.md

@@ -4,7 +4,7 @@ typescript编写的vue
 
 # create pages e.g.
 ```sh
-node ./build/code-gen/page.js path=pages account/accountList config/localConfigList config/thirdConfigList log/logList menu/menuList order/nomalList order/overList order/verifyList role/roleList user/blackList user/businessList user/nomalList
+node ./build/code-gen/page.js path=pages account/accountList config/localConfigList config/thirdConfigList log/logList menu/menuList order/normalList order/overList order/verifyList role/roleList user/blackList user/businessList user/normalList
 
 node ./build/code-gen/page.js path=components main table
 ```
\ No newline at end of file

build/code-gen/page.js

@@ -35,6 +35,7 @@ args.filter(a => a.indexOf('=') < 0)
         const cssFileRelative = path.relative(fileDir, cssFilePath).replace(/\\/g, '\/');
 
         const className = fileName.replace(/^./, t => t.toUpperCase())
+        const componentName = dir.replace(/[\/A-Z]/g, t => ['-', t.replace('/', '').toLowerCase()].join(''))
 
         console.log({
             path: fileDir,
@@ -47,12 +48,13 @@ args.filter(a => a.indexOf('=') < 0)
 
         fs.writeFileSync(jsFilePath, `
 import Vue from 'vue';
-import Componet from 'vue-class-component';
+import { Component } from "vue-property-decorator";
 /// @ts-ignore
 import template = require("text!./${htmlFileRelative}");
 /* import "css!.${cssFileRelative}"; */
 
-@Componet({
+@Component({
+    name: '${componentName}',
     template: template
 })
 export default class ${className} extends Vue {

build/map.project-deps.js

@@ -15,4 +15,5 @@ module.exports = {
   "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"),
 };
\ No newline at end of file

package.json

@@ -7,6 +7,7 @@
     "requirejs-text": "^2.0.15",
     "vue": "^2.6.11",
     "vue-class-component": "^7.2.3",
+    "vue-property-decorator": "^9.0.0",
     "vue-router": "^3.3.4"
   },
   "main": "index.js",

src/app/App.ts

 import Vue from "vue";
-import VueRouter from "vue-router";
+import VueRouter, {RouteConfig} from "vue-router";
 import Main from './components/main/main';
 
-const routes = [];
+const routes: RouteConfig[] = [
+    {
+        path: '/',
+    },
+    {
+        path: '/home',
+    }
+];
 
-const router = new VueRouter({
-    routes,
-});
+Vue.use(VueRouter);
 
 new Vue({
     el: '#app',
-    router,
+    router: new VueRouter({
+        mode: "history",
+        base: "/",
+        routes: routes,
+    }),
     render(h) {
         if (0 <= 1) {
 

src/app/components/main/main.ts

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

src/app/components/table/table.ts

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

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

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

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

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

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

 import Vue from 'vue';
-import Componet from 'vue-class-component';
+import { Component } from "vue-property-decorator";
 /// @ts-ignore
 import template = require("text!./thirdConfigList.html");
 /* import "css!.thirdConfigList.css"; */
 
-@Componet({
+@Component({
+    name: 'config-third-config-list',
     template: template
 })
 export default class ThirdConfigList extends Vue {

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

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

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

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

src/app/pages/order/nomalList/nomalList.html

-<div>this page is order/nomalList</div>
\ No newline at end of file

src/app/pages/order/nomalList/nomalList.ts

-import Vue from 'vue';
-import Componet from 'vue-class-component';
-/// @ts-ignore
-import template = require("text!./nomalList.html");
-/* import "css!.nomalList.css"; */
-
-@Componet({
-    template: template
-})
-export default class NomalList extends Vue {
-}
\ No newline at end of file

src/app/pages/order/normalList/normalList.html

+<div>this page is order/normalList</div>
\ No newline at end of file

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

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

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

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

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

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

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

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

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

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

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

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

src/app/pages/user/nomalList/nomalList.html

-<div>this page is user/nomalList</div>
\ No newline at end of file

src/app/pages/user/nomalList/nomalList.ts

-import Vue from 'vue';
-import Componet from 'vue-class-component';
-/// @ts-ignore
-import template = require("text!./nomalList.html");
-/* import "css!.nomalList.css"; */
-
-@Componet({
-    template: template
-})
-export default class NomalList extends Vue {
-}
\ No newline at end of file

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

+<div>this page is user/normalList</div>
\ No newline at end of file

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

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

src/require.config.js

@@ -4,6 +4,7 @@ define({
         '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: {

src/typings.d.ts

+declare module "*.html" {
+    const content: string;
+    export default content;
+}
+declare module "text!*" {
+    const html: string;
+    export default html;
+}
\ No newline at end of file

tsconfig.json

@@ -16,8 +16,8 @@
     "baseUrl": ".",
     "paths": {
       "*": [
-        "node_modules/@types",
-        "src/typings.d.ts"
+        // "src/typings.d.ts",
+        "node_modules/@types"
       ],
       "vue": [
         "node_modules/vue/types/index.d.ts"
@@ -28,6 +28,9 @@
       "vue-class-component": [
         "node_modules/vue-class-component/lib/index.d.ts"
       ],
+      "vue-property-decorator": [
+        "node_modules/vue-property-decorator/lib/vue-property-decorator.d.ts"
+      ],
       "tslib": [
         "node_modules/tslib/tslib.d.ts"
       ]