文章转自:https://www.cnblogs.com/crazycode2/p/7821089.html

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();

    }

}

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

1

[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配置文件里 加上

1

2

3

alias: {

    'vue''vue/dist/vue.esm.js'

}

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

Logo

前往低代码交流专区

更多推荐