Vue-TS-Boilerplate

A Vue.js starter boilerplate with typescript .

Usage

npm run build // 生产打包

npm run dev // 开发模式

npm run analyze // 生产打包并bundle分析

npm run lint // 代码Lint

Note

三种方式写一个Vue组件

Component.vue

这种方式仍沿用了Vue SFC，只是script部分的语法改成TypeScript，script内部能够利用一些TypeScript的静态类型检查优势，由于无法利用JSX语法，TypeScript无从检查template部分的数据和语法，且TSLint不支持vue文件

Component.vue + Component.ts

一般建立组件名为名称的文件夹，内部包含index.vue和index.ts两个文件，index.vue为原始 SFC 代码，index.ts主要为了方便其他组件引入并添加类型支持，例:

import HelloWorld from "./index.vue";
import Vue, { VueConstructor } from "vue";

declare module "vue/types/vue" {
    // Add global static props for Vue
    interface VueConstructor {}

    // Add global instance props for Vue
    interface Vue {}
}

interface IProps {
    propMessage: string;
}

interface IHelloWorld extends Vue {
    msg: string;
    hello: () => void;
    props: IProps;
}

export default HelloWorld as VueConstructor<IHelloWorld>;

Component.tsx

完全TSX语法，不使用vue SFC，需要引入vue-tsx-helper

// ComponentA
import { Component, Prop } from "vue-property-decorator";
import { VueComponent } from "vue-tsx-helper";

/**
 * Vue component props types
 */
interface IProps {
    msg: string;
}

const mixin = {
    created() {
        console.log("mixin created");
    }
};

@Component({
    name: "ComponentA",
    mixins: [mixin]
})
export default class TestComponent extends VueComponent<IProps> {
    @Prop() msg;

    created() {
        console.log("created");
    }

    render(h) {
        return (
            <div class="container">
                {"parent message: " + this.msg}
                {this.$slots.default}
            </div>
        );
    }
}

// WrapComponent
import { Component, Prop } from "vue-property-decorator";
import { VueComponent } from "vue-tsx-helper";
import ComponentA from "./ComponentA";

/**
 * Vue component props types
 */
interface IProps {}

@Component
export default class WrapComponent extends VueComponent<IProps> {
    @Prop() msg;

    render(h) {
        return (
            <ComponentA msg={"msg from parent"}>
                <h2>Page writed without .vue but plain tsx</h2>
                <anyslot is="router-link" to="/">
                    Back to home
                </anyslot>
            </ComponentA>
        );
    }
}