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

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

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

declare module 'ant-design-vue' {const Ant: anyexport default Ant;
}

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

<template>
<a-tree:loadData="onLoadData":treeData="treeData"
/></template><script 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 = [{ title: 'Expand to load', key: '0' },{ title: 'Expand to load', key: '1' },{ title: 'Tree Node', key: '2', isLeaf: true },];@Emit()private onLoadData(treeNode: any) {dosomething()}
}
<style lang='scss' scoped>
.class...{}
</style>

友情链接

Ant Design of Vue 官网

vue2 typescript 项目如何引入antd -ui组件相关推荐

uni-app项目中引入Vant UI组件库（完美避坑！！！）纯净版
文章目录第一步,HBuilder X中新建一个uni-app的项目第二步,HBuilder X提示项目创建成功,在HBuilder X用命令行窗口打开创建的项目(或直接在创建的项目文件夹内用cmd ...
微信小程序mpvue项目使用WuxWeapp前端UI组件
前言:这是一篇简单粗暴的使用指南在最近的小程序项目里前端UI框架最后选择使用WuxWeapp,这篇文章记录一下如何在小程序mpvue项目中使用该UI组件. 步骤一:下载源码 (地址在这里) 主要是里 ...
Naive UI - 火热出炉！基于 Vue 3.0/TypeScript 的免费开源前端 UI 组件库
非大厂 KPI 项目!开源三天就收获 800 Star,还获得 Vue 作者尤雨溪的官方推荐. 关于 Naive UI Naive UI 是一款基于当前比较新的 Vue 3.0/TypeScript ...
Vue3 的学习教程汇总、源码解释项目、支持的 UI 组件库、优质实战项目
大家好,我是你们的猫哥,一个不喜欢吃鱼.又不喜欢喵的超级猫 ~ 关于猫哥,大家可以看看我的年终总结前端工程师的 2020 年终总结 - 3 年之痒. 前言猫哥是一个常年混迹在 GitHub 上 ...
vue3 中使用antd UI组件
之前搞pc端的会使用element的ui组件现在 vue3 来了顺便也更新试用下 vuu3中的ui组件不过好像 element还没更新支持 vue3 所以先用antd 来试试看 1. ...
mpvue项目中使用第三方UI组件库
原文链接最新声明本文编写时间较早,随着时间的推移,mpvue及其周边生态越来越完善,文中的案例已经不适合在项目使用.希望大家参考其他更新的文章~ 简介微信小程序上线已有一年多时间啦,自美团的mp ...
项目前端（一）、vue项目中引入vue-router路由组件
1.在项目根目录下,执行 npm install vue-vouter 是否成功引入router路由组件,我们可以查看package.json文件中dependencies标签下是否有vue-rout ...
在已有vue项目中半途引入cube ui组件库的使用遇到的坑(血泪)
直接进入正题(我这儿是属于cube-ui普通编译) 1,在你的vue项目中找到package.json文件安装cube-ui 终端输入命令 npm install cube-ui --save 2 ...
使用antd UI组件有感
公司使用的的react.js的版本提14.7的,JS版本使用的是ES6语法,因此在使用antd过程中,有些许不愉快的记录,分享给大家,一起学习: 如果是react 14.7版本时,使用getField ...

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

背景

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

友情链接

vue2 typescript 项目如何引入antd -ui组件相关推荐

最新文章

热门文章

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

背景

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

友情链接

vue2 typescript 项目 如何引入antd -ui组件相关推荐

最新文章

热门文章

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

vue2 typescript 项目如何引入antd -ui组件相关推荐