文章目录
- 安装
- 项目引入全局组件
- 常见问题
- 关键字避免
- 处理校验异常es-link
- 栈溢出
- ant图库未加载
- git
-
- 简单使用
-
安装
npm install ant-design-vue@2.0.0-rc.3 --save
npm i --save ant-design-vue@next
npm i --save ant-design-vue //目前使用的兼容版本"ant-design-vue": "^2.2.8",
项目引入全局组件
![在这里插入图片描述](https://img-blog.csdnimg.cn/f54613e8e1654bebb6ad6c517abf706c.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBA55GeIOaWsA==,size_20,color_FFFFFF,t_70,g_se,x_16)
常见问题
关键字避免
![在这里插入图片描述](https://img-blog.csdnimg.cn/4b1c0f40e7d04f0f9d585c547ff3fc1a.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBA55GeIOaWsA==,size_20,color_FFFFFF,t_70,g_se,x_16)
处理校验异常es-link
error The “HelloWorld” component has been registered but not used vue/no-unused-components
![在这里插入图片描述](https://img-blog.csdnimg.cn/d4286080e94c490aa080944946e7eaf9.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBA55GeIOaWsA==,size_20,color_FFFFFF,t_70,g_se,x_16)
栈溢出
![在这里插入图片描述](https://img-blog.csdnimg.cn/09f4a74306624940847b637f103fcc33.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBA55GeIOaWsA==,size_20,color_FFFFFF,t_70,g_se,x_16)
![在这里插入图片描述](https://img-blog.csdnimg.cn/081c2feff28d4800abb8510193869f3e.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBA55GeIOaWsA==,size_20,color_FFFFFF,t_70,g_se,x_16)
ant图库未加载
![在这里插入图片描述](https://img-blog.csdnimg.cn/7ad3af72f693467f92c67d2a13e3e110.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBA55GeIOaWsA==,size_20,color_FFFFFF,t_70,g_se,x_16)
git
追加到上一次提交文件
![在这里插入图片描述](https://img-blog.csdnimg.cn/97d4dd7e4f3141b48f3ee236f4b2bb36.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBA55GeIOaWsA==,size_20,color_FFFFFF,t_70,g_se,x_16)
简单使用
自定义组件-header
组件可以,小驼峰大驼峰,-链接
the-header组件
<template>
<a-layout-header class="header">
<div class="logo" />
<a-menu
theme="dark"
mode="horizontal"
v-model:selectedKeys="selectedKeys1"
:style="{ lineHeight: '64px' }"
>
<a-menu-item key="1">nav 11</a-menu-item>
<a-menu-item key="2">nav 2</a-menu-item>
<a-menu-item key="3">nav 3</a-menu-item>
</a-menu>
</a-layout-header>
</template>
<script lang="ts">
import { defineComponent } from 'vue';
export default defineComponent({
name: 'the-header'
});
</script>
<style scoped>
</style>
引用组件
<the-header></the-header>
<script lang="ts">
import { defineComponent } from 'vue';
import TheHeader from '@/components/the-header.vue';
export default defineComponent({
name: 'app',
components: {
TheHeader,
}
});
</script>
列表
加any问题ts类型
![在这里插入图片描述](https://img-blog.csdnimg.cn/a71833e943a7474d8ebd605ac5a46cf9.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBA55GeIOaWsA==,size_20,color_FFFFFF,t_70,g_se,x_16)
ts类型any变为js不限制类型,如果有报错提示
![在这里插入图片描述](https://img-blog.csdnimg.cn/743245494dc9468ebe6d43ada106dfa2.png)
图标iocn
安装npm install @ant-design/icons-vue --save
main.ts全局引入,官方文档好像需要一个个引入麻烦
import * as Icons from '@ant-design/icons-vue';
// createApp(App).use(store).use(router).use(Antd).mount('#app'); // 链式变动
const app = createApp(App);
app.use(store).use(router).use(Antd).mount('#app');
// 全局使用图标
const icons: any = Icons;
for (const i in icons) {
app.component(i, icons[i]);
}
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)