vue+ts开发踩坑日志【持续更新】

更新时间：2019年11月20日11:39:22

import *.vue文件报错

• scr 目录下面新建 *-vue.d.ts
• 因为ts不支持*.vue 后缀的文件
• 意思是告诉 TypeScript 以 *.vue 为后缀的文件可以交给 vue 模块来处理。
• 引入的时候加上 .vue 后缀

about.vue
// 这里还有一个坑，就算被当做成组件也要在组件内部声明导出这个额模块
export default class about extends Vue {}

//home.vue
import templateAbout from './About.vue';

//shims-vue.d.ts
declare module '*.vue' {
  import Vue from 'vue'
  export default Vue
}

使用Mixins全局混入之后，this会报错

// minxin.ts
//全局封装minxin混入方法
import Vue from 'vue';
import Component from 'vue-class-component';
//必须使用Component
@Component
export default class MyMixin extends Vue {
	age:number = 24
}

//home.vue
//console.log(this.age)会报错是因为当前没有找到age
//ts是必须先声明之后才能访问
import { Component, Vue } from 'vue-property-decorator';
import MyMixin from '../mixin';
//Component引入mixins
Component({
  mixins:[MyMixin]
})

export default class Home extends Vue {
//定义一个private私有created方法
private created():void{
		console.log(this.age);//能够正常访问，但是ts会报错
		console.log((this as any).age);//正常
	}
}