修改 ant-design-vue 主题颜色

### Ant Design Vue 与 Vue 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 Vue 和 Vue 3 结合使用的介绍及操作指南。