vue-class-component 以class的模式写vue组件

Posted 每天都要进步一点点

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了vue-class-component 以class的模式写vue组件相关的知识,希望对你有一定的参考价值。

vue英文官网推荐了一个叫vue-class-component的包,可以以class的模式写vue组件。vue-class-component(以下简称Component)带来了很多便利:

1.methods,钩子都可以直接写作class的方法

2.computed属性可以直接通过get来获得

3.初始化data可以声明为class的属性

4.其他的都可以放到Component装饰器里

举个小例子

@Component({
    props: {
        firstName: String,
        lastName: String
    },
    components: {
        ‘component-a‘: ComponentA
    }
})
export class XXXX extends Vue {
    firstName: string;
    lastName: string;
    
    //初始data
    middleName = ‘middle‘;
    
    //computed 属性
    get fullName() {
        return this.firstName + this.lastName;
    }
    
    //method
    hello() {
        alert(`Hello ${this.fullName}!`);
    }
    
    //钩子
    mounted() {
        this.hello();
    }
}

现在尽管可以以class的模式来写vue的组件了,但自动补全,代码提示等功能还是没有,要想获取好的代码提示还得是原语言啊,js代码在.ts,.js文件写,scss在.scss写,html在.html写。

最终vue组件以以下方式写感觉挺爽,很顺

import Vue from ‘vue‘;
import Componet from ‘vue-class-component‘;

require(‘./XXX.template.scss‘);

@Component({
    template: require(‘./XXX.template.html‘),
    props: {
        firstName: String,
        lastName: String
    },
    components: {
        ‘component-a‘: ComponentA
    }
})
export class XXXX extends Vue {
    firstName: string;
    lastName: string;
    
    //初始data
    middleName = ‘middle‘;
    
    //computed 属性
    get fullName() {
        return this.firstName + this.lastName;
    }
    
    //method
    hello() {
        alert(`Hello ${this.fullName}!`);
    }
    
    //钩子
    mounted() {
        this.hello();
    }
}

现在各个文件回归它的本职工作了,哈哈哈,不过现在打包时有点小问题,

[Vue warn]: You are using the runtime-only build of Vue where the template option is not available. Either pre-compile the templates into render functions, or use the compiler-included build.

解决方法也很简单,在webpack配置文件里 加上

alias: {
    ‘vue‘: ‘vue/dist/vue.esm.js‘
}

即可。好的,现在代码补全,语法提示什么功能都回来了。

以上是关于vue-class-component 以class的模式写vue组件的主要内容,如果未能解决你的问题,请参考以下文章

vue-class-component:如何创建和初始化反射数据

vue-class-component : 调用类方法时 TS2339

Vuelidate 与 Vue 3 + vue-class-component + TypeScript

vue-class-component + typescript:如何在导入的函数中使用组件的类作为“this”的类型?

[Vue @Component] Simplify Vue Components with vue-class-component

VueJS 组件:具有 vue-class-component 的单独文件的代码覆盖率