我是
靠谱客的博主
善良小懒猪，最近开发中收集的这篇文章主要介绍
vue-class-component 以class的模式写vue组件，觉得挺不错的，现在分享给大家，希望可以做个参考。
概述
文章转自：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'
}
|
即可。好的，现在代码补全，语法提示什么功能都回来了。
最后
以上就是善良小懒猪为你收集整理的vue-class-component 以class的模式写vue组件的全部内容，希望文章能够帮你解决vue-class-component 以class的模式写vue组件所遇到的程序开发问题。
如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。
本图文内容来源于网友提供，作为学习参考使用，或来自网络收集整理，版权属于原作者所有。
发表评论 取消回复