ant-design-vue 2中定制主题的方式

Posted 2023-03-16

参考技术A ant-design-vue 中定制主题，就是覆盖组件库 预定义的less 变量

常用的通用的有这些

总的来说有两：

这样的好处是，样式主题放在 less 文件，而不是在confing.js 中，变量修改保持一致

vue.config.js  文件中添加如下配置：

```

css:

    loaderOptions:

      less:

        lessOptions:

          modifyVars:

            'primary-color': '#00A08A',

            'link-color': '#00A08A',

            'border-radius-base': '2px',

          ,

          javascriptEnabled: true,

        ,

      ,

    ,

  ,

```

theme.less 中覆盖变量，符合直觉，样式在less中设置，但不能和babel-plugin-import 一块使用。

config.js 中配置主题less 变量，能和babel-plugin-import 配合，优化打包文件的大小。

ant-design-vue 快速入手及常用标签

　　

<a-locale-provider :locale="locale"> 全局配置国际化文案

1、按钮
<a-button>按钮</a-button>

2、图标
<a-icon type="step-backward" />

3、输入框
<a-input></a-input>

4、单选框
<a-radio>Radio</a-radio>

5、分页
<a-pagination v-model="current" :total="50" />

6、卡片

<a-card title="Card Title">

 7、布局

<a-layout>

侧边栏

a-layout-sider

头部导航栏、菜单、菜单标签

a-layout-header、a-menu、a-menu-item

内容栏

a-layout-content

底部栏

a-layout-footer

面包屑

a-breadcrumb、a-breadcrumb-item