文章转自: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'
}
即可。好的,现在代码补全,语法提示什么功能都回来了。