文章转自：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'
}
|
即可。好的，现在代码补全，语法提示什么功能都回来了。
0
0
已为社区贡献25条内容
所有评论(0)