vue3.0引入antd-desgin-vue以及主题切换

安装

npm install ant-design-vue --save

按需引入组件

antdv.ts

// 按需加载antdv
import type { App } from 'vue'

import { ConfigProvider, Form, Input, InputNumber, Button, Card, Layout, Menu, message, Dropdown, Tooltip, Row, Col, Alert, Switch, Select, Radio, TreeSelect, DatePicker, Table, Spin, Tag, Divider, Popconfirm, Breadcrumb } from 'ant-design-vue'

export function setupAntd(app: App<Element>): void {
  app.use(ConfigProvider)
  app.use(Button)
  app.use(Form)
  app.use(Input)
  app.use(InputNumber)
  app.use(Card)
  app.use(Layout)
  app.use(Menu)
  app.use(Dropdown)
  app.use(Tooltip)
  app.use(Row)
  app.use(Col)
  app.use(Alert)
  app.use(Switch)
  app.use(Select)
  app.use(Radio)
  app.use(TreeSelect)
  app.use(DatePicker)
  app.use(Table)
  app.use(Spin)
  app.use(Tag)
  app.use(Divider)
  app.use(Popconfirm)
  app.use(Breadcrumb)

  // eslint-disable-next-line no-param-reassign
  app.config.globalProperties.$message = message
}

引入样式

babel.config.js

module.exports = {
  presets: ['@vue/cli-plugin-babel/preset'],
  plugins: [
    ['import', { libraryName: 'ant-design-vue', libraryDirectory: 'es', style: 'css' }] // `style: true` 会加载 less 文件
  ]
}

声明变量文件

variables.less

// Silder
@menuLightActiveText: #1890ff;
@menuLightActiveBg: #e6f7ff;

@menuDarkActiveText: #fff;
@menuDarkActiveBg: #1890ff;

@menuBg: #001529;
@menuLightBg: #fff;

@menuWidth: 200px;

// topSilder
@topSilderHeight: 50px;

// navbar
@navbarHeight: 40px;

// tagsView
@tagsViewHeight: 40px;

// content
@contentBg: #fff;

// html body
@minWidth: 992px;

// deep
@deep: ~'::v-deep';

配置全局变量

vue.config.js

// 引入全局css变量
function addStyleResource(rule) {
  rule
    .use('style-resource')
    .loader('style-resources-loader')
    .options({
      patterns: [
        path.resolve(__dirname, './src/styles/variables.less') // 需要全局导入的less
      ]
    })
}
module.esports = {
    chainWebpack: (config) => {
        const types = ['vue-modules', 'vue', 'normal-modules', 'normal']
        types.forEach((type) => addStyleResource(config.module.rule('less').oneOf(type)))
    }
}

最后在项目入口文件main.ts中引入antd即可

main.ts

import { createApp } from 'vue'

import App from './App.vue'

import router from './router'

import { setupAntd } from '@/libs/antdv' // antdv UI

import '@/styles/reset.css' // 重置不同浏览器之间的标签默认样式

import { setupStore } from '@/store'

async function bootstrap() {
  const app = createApp(App)

  setupStore(app) // 引入状态管理

  setupAntd(app) // 引入antdv组件

  app.use(router).mount('#app')
}

bootstrap()

完成以上步骤，就可以happy的在页面里面使用antd的组件并且还能定制化主题css变量了。

如果对你有帮助，麻烦点个小心心哦！谢谢