vue2 typescript 项目 如何引入antd -ui组件

背景

目前 antd 还没有写 .d.ts 类型的声明文件，所以无法在目前的项目中正常使用，
当在ts文件中导入ant-design-vue的时候

	import {Button,message,Tree} from \"ant-design-vue\"

会报错，如下：

	Could not find a declaration file for module \'ant-design-vue\'.
	 \'.../node_modules/ant-design-vue/dist/antd.min.js\' implicitly 
	 has an \'any\' type.Try `npm install @types/ant-design-vue` 
	 if it exists or add a new declaration (.d.ts) file containing 
	 `declare module \'ant-design-vue\';

antd这么好用，不能在type 中使用实在是太可惜，所以网上一顿搜，
然而可悲的是网上还没有什么样的解决方案，因此，通过自己的实践，以及如何在type 的vue项目中使用antd的一些经验分享一下

撸起袖子干起来(使用tree组件实战)

1. 在项目的src文件夹下先创建一个声明文件，作用是当用户在ts文件下导入 \'ant-design-vue’的时候默认导入Ant(可随意)变量
   文件路径 项目名/src/ant-design.d.ts中

declare module \'ant-design-vue\' {
   const Ant: any
   export default Ant;
}

1. 在type 中局部导入组件，因为不是全局的所以，我就不讲全局挂载了。

<template>
<a-tree
  :loadData=\" Data\"
  :treeData=\"treeData\"
/>

</template>

<  lang=\'ts\'>
import { Component, Vue, Prop, Emit, Watch } from \'vue-property-decorator\';
import Ant from \"ant-design-vue\";//Ant就是上个声明文件中的别名，使用后需要用.
@Component({
  components: {
      ATree:Ant.Tree,// 挂载组件，别名为ATree，驼峰结构,在template中使用<a-tree>
  },
})
export default class LeftBar extends Vue {
  private treeData = [
          {  : \'Expand to load\', key: \'0\' },
          {  : \'Expand to load\', key: \'1\' },
          {  : \'Tree Node\', key: \'2\', isLeaf: true },
    	];
   @Emit()
      private  Data(treeNode: any) {
      	dosomething()
      }
}
<style lang=\'scss\' scoped>
.class...{
}
</style>

友情链接

Ant Design of Vue 官网