vue脚手架中使用typescript

之前讲过typescript的一些基础语法,现在就正式开始在vue脚手架中使用typescript
首先使用vue cli 创建一个 基于ts的项目
如果你的电脑上没有安cli的话 最好还是全局安装一个

npm install @vue/cli -g   

2.创建项目

vue create vuets-app   // 利用cli快速创建基于webpack的vue项目

3.推荐使用 vscode进行开发
vue-ts-decorator 安装插件 实现 输入 vue 回车自动生成模板

<template>
        <div class="Home"></div>
</template>

<script lang="ts">
import { Vue, Component, Prop } from 'vue-property-decorator'  // vue 类式装饰器

@Component({})   // 组建的注册在这里
//  支持类的的写法
export default class Home extends Vue {

}
</script>

<style lang="scss">

</style>

4.下面我们一一举例子说明
导入子组件
vue支持ts是通过装饰器 模式实现 加强了原来的功能 使他可以达到ts的那种写法

import { Vue, Component, Prop, Provide } from "vue-property-decorator";
import child from "@/components/Child.vue"
@Component({
  components: {
    child
  }
})
注册完成之后就可以在template 中使用了

```javascript
<child></child>

Prop 装饰器的使用

export default class extends Vue {
  @Prop({ default: 'chart' }) private className!: string
}

Provide 变量定义使用
和之前在vue.js中使用方式一样 只是点定义的时候加了一点限制而已

export default class extends Vue {
  @Provide() msg:string="hello world"
  @Provide() obj:{
      name:string,
      age:number,
      show:boolean		
  }={
      name:"张三",
      age:12,
      show:true
  }
}

其他的声明周期函数和自定义的函数
只是在参数和函数返回上加上类型限制就可以

create():void{}
// 自定义的方法 就不要再加methods:{} 直接写方法就可以
handleClick(value:string):void{
	console.log('处理点击事件');
}

有的时候我们使用axios的时候 会全局注册到我们Vue实例中 我们在每个组件中使用的时候还得加点东西 否则 ts的编译会报错 报错的话 我们的页面也会跟着报错了 解决方法是
当我们使用一个框架的时候就应该去接收作者设定的框架内的世界观,只能去接受他的写法和规则。

在main.ts中注册使用
import axios from "axios";
Vue.prototype.axios=axios;
//在组件中使用
this.axios.post()// 直接在组件中这样写是会报错的 他不认
(this as any).axios.post()
// 还有一种情况就是vue中通过ref获取元素的时候 this 也需要声明称 any
(this as any).$refs.myRef // 好像使用全局的方法的时候都需要这样 
在自己组件内部使用自己的数据的时候就不需要了 
比如 this.obj.name  就不会报错了