vite antdv vue3换颜色主题

1、安装依赖

{
  "name": "antdv",
  "version": "0.0.0",
  "private": true,
  "scripts": {
    "dev": "vite",
    "build": "run-p type-check build-only",
    "preview": "vite preview",
    "test:unit": "vitest",
    "build-only": "vite build",
    "type-check": "vue-tsc --noEmit -p tsconfig.vitest.json --composite false",
    "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .gitignore",
    "format": "prettier --write src/"
  },
  "dependencies": {
    "@ant-design/icons-vue": "^6.1.0",
    "ant-design-vue": "3.2.20",
    "less": "^4.1.3",
    "less-loader": "^11.1.3",
    "pinia": "^2.1.3",
    "unplugin-vue-components": "^0.25.1",
    "vue": "^3.3.4",
    "vue-router": "^4.2.2"
  },
  "devDependencies": {
    "@rushstack/eslint-patch": "^1.2.0",
    "@tsconfig/node18": "^2.0.1",
    "@types/jsdom": "^21.1.1",
    "@types/node": "^18.16.17",
    "@vitejs/plugin-vue": "^4.2.3",
    "@vitejs/plugin-vue-jsx": "^3.0.1",
    "@vue/eslint-config-prettier": "^7.1.0",
    "@vue/eslint-config-typescript": "^11.0.3",
    "@vue/test-utils": "^2.3.2",
    "@vue/tsconfig": "^0.4.0",
    "eslint": "^8.39.0",
    "eslint-plugin-vue": "^9.11.0",
    "jsdom": "^22.1.0",
    "npm-run-all": "^4.1.5",
    "prettier": "^2.8.8",
    "typescript": "~5.0.4",
    "vite": "^4.3.9",
    "vitest": "^0.32.0",
    "vue-tsc": "^1.6.5"
  }
}

antdv用的是less

然后vite配制

import { fileURLToPath, URL } from 'node:url'

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import vueJsx from '@vitejs/plugin-vue-jsx'
import Components from 'unplugin-vue-components/vite';
import { AntDesignVueResolver } from 'unplugin-vue-components/resolvers';

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    vueJsx(),
    Components({
      resolvers: [AntDesignVueResolver({ importStyle: false })],
    }),
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  },
  css: {
    preprocessorOptions: {
      less: {
        javascriptEnabled: true
      }
    },
  }
})

说明：

importStyle: false 不要导入，否则切换颜色会不起作用。

<template>
  <Row :gutter="16" :wrap="false">
    <Col style="display: flex;">
    <Space direction="vertical" align="center">
      <!-- Primary Color -->
      <input type="color" :value="colorState.primaryColor" @input="e => onColorChange('primaryColor', e)" />

      <span style="color: var(--ant-primary-color)">var(`--ant-primary-color`)</span>

      <!-- Error Color -->
      <input type="color" :value="colorState.errorColor" @input="e => onColorChange('errorColor', e)" />

      <span style="color: var(--ant-error-color)">var(`--ant-error-color`)</span>

      <!-- Warning Color -->
      <input type="color" :value="colorState.warningColor" @input="e => onColorChange('warningColor', e)" />

      <span style="color: var(--ant-warning-color)">var(`--ant-warning-color`)</span>

      <!-- Success Color -->
      <input type="color" :value="colorState.successColor" @input="e => onColorChange('successColor', e)" />

      <span style="color: var(--ant-success-color)">var(`--ant-success-color`)</span>

      <!-- Info Color -->
      <input type="color" :value="colorState.infoColor" @input="e => onColorChange('infoColor', e)" />
      <span style="color: var(--ant-info-color)">var(`--ant-info-color`)</span>
    </Space>
    </Col>

    <Col flex="auto">
    <Space direction="horizontal" style="width: 100%" :size="0">
      <template #split>
        <Divider />
      </template>
      <!-- Primary Button -->
      <!-- <SplitSpace> -->
      <Button type="primary">Primary</Button>
      <Button>Default</Button>
      <Button type="dashed">Dashed</Button>
      <Button type="text">Text</Button>
      <Button type="link">Link</Button>
      <!-- </SplitSpace> -->

      <!-- Danger Button -->
      <!-- <SplitSpace> -->
      <Button danger type="primary">Primary</Button>
      <Button danger>Default</Button>
      <Button danger type="dashed">Dashed</Button>
      <Button danger type="text">Text</Button>
      <Button danger type="link">Link</Button>
      <!-- </SplitSpace> -->

      <!-- Ghost Button -->
      <!-- <SplitSpace style="background: rgb(190, 200, 200)"> -->
      <Button type="primary" ghost>Primary</Button>
      <Button ghost>Default</Button>
      <Button type="dashed" ghost>Dashed</Button>
      <Button type="primary" ghost danger>Primary</Button>
      <Button ghost danger>Default</Button>
      <Button type="dashed" ghost danger>Dashed</Button>
      <!-- </SplitSpace> -->

    </Space>
    </Col>
  </Row>
</template>
<script lang="ts" setup>
import { defineComponent, h, reactive, ref } from 'vue';
import { ConfigProvider, Space, Divider, Transfer, Alert, Progress, Button, Row, Col } from 'ant-design-vue';
import type { TreeSelectProps } from 'ant-design-vue';
import {
  DownOutlined,
  MailOutlined,
  SettingOutlined,
  ClockCircleOutlined,
} from '@ant-design/icons-vue';
const inputProps = {
  style: { width: '128px' },
};

const selectProps = {
  ...inputProps,
  options: [
    { value: 'light', label: 'Light' },
    { value: 'bamboo', label: 'Bamboo' },
    { value: 'little', label: 'Little' },
  ],
};

const treeData = [
  {
    value: 'little',
    key: 'little',
    label: 'Little',
    title: 'Little',
    children: [
      { value: 'light', key: 'light', label: 'Light', title: 'Light' },
      { value: 'bamboo', key: 'bamboo', label: 'Bamboo', title: 'Bamboo' },
    ],
  },
];

const treeSelectProps: TreeSelectProps = {
  ...inputProps,
  treeCheckable: true,
  maxTagCount: 'responsive',
  treeData,
};

const carTabListNoTitle = [
  {
    key: 'article',
    tab: 'article',
  },
  {
    key: 'app',
    tab: 'app',
  },
  {
    key: 'project',
    tab: 'project',
  },
];

const transferData = [];

for (let i = 0; i < 20; i++) {
  transferData.push({
    key: i.toString(),
    title: `content${i + 1}`,
    description: `description of content${i + 1}`,
  });
}

const colorState = reactive({
  primaryColor: '#1890ff',
  errorColor: '#ff4d4f',
  warningColor: '#faad14',
  successColor: '#52c41a',
  infoColor: '#1890ff',
});

const onColorChange = (type: string, e: any) => {
  Object.assign(colorState, { [type]: e.target.value });
  ConfigProvider.config({
    theme: colorState,
  });
};
</script>

 说明：主要是运用ConfigProvider.config，实现颜色的变化。