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界面化创建项目

<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
import HelloWorld from "@/components/HelloWorld.vue"; // @ is an alias to /src

//引入组件
@Component({
  //组件引入
  components: {
    HelloWorld
  },
  //过滤器
  filters: {
    filterName: (value: string): string => {
      return value.slice(0, 3);
    }
  },
  //watch监控
  watch: {
    name: () => {
      console.log("name改变了");
    },
    //监控数组
    list: {
      handler: function(newValue, oldValue) {
        console.log(newValue);
      },
      deep: true
    }
  }
})
export default class Home extends Vue {
  //设置data 函数返回对象的属性
  name: string = "libing";
  surname: string = "zhang";
  list: number[] = [1, 2, 3, 5, 6];
  //methods 方法
  changeStore(): void {
    //调用store中的方法 和之前vue js一样
    this.$store.commit("setState", "修改值");
    this.name = "change";
    this.list = [5, 8, 9];
  }

  //相当于computed 中的函数
  get myName(): string {
    return this.name + this.surname;
  }
}
</script>

生命周期和之前一样

  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",