使用ts和vue开发一个应用

工程创建

# 1. 如果没有安装 Vue CLI 就先安装
npm install --global @vue/cli

# 2. 创建一个新工程，并选择 "Manually select features (手动选择特性)" 选项
vue create my-project-name

基础用法

import { Component, Vue } from 'vue-property-decorator';
import HelloWorld from './components/HelloWorld.vue';

@Component({
  components: {
    HelloWorld
  },
  props: {
    
  },
  watch: {}
})
export default class App extends Vue {
  //data
  msg = 123
  //methods
  onClick()  {
    console.log('ccc')
  }
  // 生命周期
  created() {
    console.log(this.msg)
  }
  // computed
  get test() {
    return this.msg
  }
}

mixin的使用

• mixin-one.ts

import Vue from 'vue'
import Component from 'vue-class-component'
//@Componet必须写否则会报错
@Component
export default class MyMixin extends Vue {
  mixinValue = '美女'
}

• App.vue

{{mixinValue}}
import { Component, Vue, Mixins } from 'vue-property-decorator';
import MyMixin from './mixins/mixin-one'
//因为Mixins继承了Vue所以App继承了Vue和MyMixin
export default class App extends Mixins(MyMixin) {
}

项目代码：https://github.com/wanglifa/ts-vue-demo