vue cli3.0 typescript开发

安装

官网
npm install -g @vue/cli npm安装vue/cli
yarn global add @vue/cli yarn安装vue/cli
vue create my-app 创建项目
vue ui ui界面化创建项目

生命周期和之前一样

  beforeCreate() {}
  created() {}
  beforeMount() {}
  mounted() {}
  beforeUpdate() {}
  updated() {}
  beforeDestroy() {}
  destroyed() {}
  beforeRouteEnter(to: any, from: any, next: any) {
    console.log("beforeRouteEnter");
    next();
  }
  beforeRouteLeave(to: any, from: any, next: any) {
    console.log("beforeRouteLeave");
    next();
  }

vue-property-decorator

vue-property-decorator 是在vue-class-component上增强了更多的结合 Vue 特性的装饰器，新增了这 7 个装饰器：

• @Emit
• @Inject
• @Model
• @Prop
• @Provide
• @Watch
• @Component(从 vue-class-component 继承)

import { Component, Vue,Prop，Watch,Emit } from "vue-property-decorator";

//使用watch监控
 @Watch('child')
  onChildChanged(val: string, oldVal: string) { }
 
 //接收组件间传值
  @Prop()
  propA: number = 1;
  @Prop({ default: "default value" })
  propB: string;
  @Prop([String, Boolean])
  propC: string | boolean;


//父组件中
//接收子组件事件   不写@Emit() 效果一样
@Emit()
parentEvent(val: string) {
    console.log(val);
}

axios 和element ui

和cli2.0使用一样

"axios": "^0.19.0",
"element-ui": "^2.11.1",
 "qs": "^6.7.0",