关于ant-design-vue的一些坑

在使用Ant Design Vue进行UI设计时遇到不少挑战,包括控件找不到、示例代码误导及样式调整困难等问题。本文将分享这些坑点及解决方法。

ant-design-vue中的一些坑

使用ant-design-vue的一些吐槽
最近一个前端项目ui要使用ant-design-vue,说干就干。首先打开ant-design-vue官网,点开layout选项,看了全部没看到相关示例代码,就在最下面看到相关API有相关代码示例。
在这里插入图片描述
照着上面代码编写之后发现报错了,没有找到相关控件,what’s the fuck?,示例也有错?
立刻百度去寻找相关资料,资料真的少的可怜,最后通过谷歌终于找到了一篇好的资料。
在这里插入图片描述
其示例代码居然是黑色箭头所指的地方,就那一小块地方,当时心里立刻一万头草泥马奔腾,太不人性化了吧。
还吐个槽,a-layout-sider居然用style设置相关width与height,坑人哦,设计这种控件居然还有背景色,有些背景色因为继承性要一个个改,坑爹。
网上资料很少,此博客会分享相关ant-design-vue的相关用法。

### Ant Design VueVue 3 的集成 Ant Design Vue 是基于 Ant Design 设计体系的 Vue 组件库,旨在帮助开发者快速构建美观且功能强大的用户界面。对于希望将 Ant Design Vue 集成到 Vue 3 项目中的开发人员来说,官方文档提供了详细的指导[^1]。 #### 安装依赖项 为了使 Ant Design Vue 正确运行于 Vue 3 中,需安装必要的 npm 包: ```bash npm install ant-design-vue@next --save ``` 此命令会下载最新版本的支持 Vue 3 的 `ant-design-vue` 库及其相关依赖文件。 #### 初始化配置 在项目的入口文件(通常是 main.js 或者类似的启动脚本)中引入并注册 Ant Design Vue 插件: ```javascript import { createApp } from 'vue'; import App from './App.vue'; import Antd from 'ant-design-vue'; import 'ant-design-vue/dist/antd.css'; const app = createApp(App); app.use(Antd).mount('#app'); ``` 上述代码片段展示了如何创建一个 Vue 实例,并通过 `.use()` 方法加载整个 Ant Design Vue 库以及样式表。 #### 使用组件 一旦完成基本设置之后,在任何单文件组件内可以直接使用来自 Ant Design Vue 的 UI 控件而无需额外声明导入语句。例如,要显示按钮控件可以这样写: ```html <template> <a-button type="primary">Primary Button</a-button> </template> <script setup lang="ts"> // No additional imports required here. </script> ``` 这种简化的方式使得页面布局更加简洁明了,同时也提高了开发效率。 #### 自定义主题 如果想要自定义 Ant Design Vue 提供的主题颜色或其他视觉属性,则可以通过修改 LESS 变量来实现个性化定制效果。具体做法是在项目根目录下新建名为 `variables.less` 文件并将所需调整的部分复制粘贴进去;接着再回到 webpack.config.js 添加如下 loader 设置以便编译时能够识别这些更改过的变量值。 ```less /* variables.less */ @primary-color: #ff0000; // red primary color for demo ``` ```javascript module.exports = { css: { loaderOptions: { less: { modifyVars: require('./path/to/your/customized-theme'), javascriptEnabled: true, }, }, }, }; ``` 以上就是关于 Ant Design VueVue 3 结合使用的介绍及操作指南。
评论 1
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值