antd for vue使用layout样式不显示问题

424 阅读1分钟

antd for vue使用layout样式不显示问题

使用Layout的话就要全局引入,不然会有很多小组件很麻烦,也就是:

main.ts中添加:

import Antd from 'ant-design-vue';
import 'ant-design-vue/dist/antd.css'; // or 'ant-design-vue/dist/antd.less'
//原本是:createApp(App).use(store).use(router).mount('#app')
// 改为:
const app = createApp(App)
app.use(Antd);// 顺便use(Antd)
app.use(store).use(router).mount('#app')

然后将官网的组件代码复制到自己的组件就行了
然后如果有样式显示不了的大概率是在:

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-MxAxDIpm-1644991686571)(vue3.assets/image-20220216135839223.png)]

这里,因为官网的组件打开控制台检查以.logo为例能看到是:
在这里插入图片描述
实际运行自己的项目之后能看到:
在这里插入图片描述
同时样式不显示:
官网:在这里插入图片描述
自己:在这里插入图片描述
这个时候可以在自己的项目中的:
在这里插入图片描述
也就是根标签添加

然后样式就有了
然后可以直接:
在这里插入图片描述
满屏