README
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>
);
}
}