1:首先安装babel-plugin-import

npm add babel-plugin-import --dev

2：在babel.config.js中添加配置

plugins: [ [ "import", { libraryName: "ant-design-vue", libraryDirectory: "es", style: true } ] ]

babel.config.js

module.exports = {
  presets: ["@vue/cli-plugin-babel/preset"],
  plugins: [
    [
      "import",
      { libraryName: "ant-design-vue", libraryDirectory: "es", style: true }
    ]
  ]
};

3:按需引入antDesign组件

import { Button, Input, InputNumber, Radio, Rate, Slider, Switch } from "ant-design-vue";
createApp(App)
  .use(router)
  .use(Button)
  .use(Input)
  .use(InputNumber)
  .use(Radio)
  .use(Rate)
  .use(Slider)
  .use(Switch)
  .mount("#app");

4：提取antd的less文件，并在html中引用，利用less.js的modyifyVars来改变主题变量。
4.1：安装插件提取less变量

npm install -D antd-theme-webpack-plugin

4.2：配置vue.config.js文件

const AntDesignThemePlugin = require("antd-theme-webpack-plugin");
const options = {
  antDir: path.join(__dirname, "./node_modules/ant-design-vue"), //antd包位置
  stylesDir: path.join(__dirname, "./src/styles/theme"), //主题文件所在文件夹
  varFile: path.join(__dirname, "./src/styles/theme/variables.less"), // 自定义默认的主题色
  mainLessFile: path.join(__dirname, "./src/styles/theme/index.less"), // 项目中其他自定义的样式（如果不需要动态修改其他样式，该文件可以为空）
  outputFilePath: path.join(__dirname, "./public/color.less"), //提取的less文件输出到什么地方
  themeVariables: ["@primary-color", "@border-color-base"], //要改变的主题变量
  indexFileName: "./public/index.html", // index.html所在位置
  generateOnce: false // 是否只生成一次（if you don't want to generate color.less on each chnage in code to make build process fast in development mode, assign it true value. But if you have new changes in your styles, you need to re-run your build process npm start.）
};
module.exports = {
  configureWebpack: {
    plugins: [new AntDesignThemePlugin(options)]
  }
};

注：option中的位置需要与项目中的具体位置对应，需要添加variables.less以及index.less.

4.3：variables.less中添加主题变量，需要与option中的themeVariables字段保持一致

@import "~ant-design-vue/lib/style/themes/default.less"; @primary-color: #992777; @border-color-base: rgb(92, 58, 58);

4.4：再次运行项目就会自动生成color.less文件。在index.html中引入less文件。

 <body>
    <noscript>
      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    **<link rel="stylesheet/less" type="text/css" href="./color.less">**
    **<script>
      window.less = {
        async: false,
        // env: "development"
      };
    </script>**
    <div id="app"></div>
    **<script src="https://cdn.bootcss.com/less.js/2.7.3/less.min.js"></script>**
    <!-- built files will be auto injected -->
  </body>

加粗字体需要配置。
4.5：开始配置颜色

<template>
  <div class="thyeme-box">
    <div v-text="name" class="name"></div>
    <a-button @click="change" type="primary">anniu1</a-button>
    <a-button @click="changeColor('#ef5b9c')" type="primary">踯躅色</a-button>
    <a-button @click="changeColor('#8f4b2e')" type="primary">茶色</a-button>
    <a-button @click="changeColor('#454926')" type="primary">媚茶</a-button>
    <a-button @click="changeColor('#594c6d')" type="primary">鸠羽鼠</a-button>
    <a-button @click="changeColor('#401c44')" type="primary">暗红</a-button>
    <a-button @click="changeColor('#008792')" type="primary">御纳戸色</a-button>
    <a-button @click="changeColor('#cbc547')" type="primary">鶸色</a-button>
    <a-button @click="changeColor('#1b315e')" type="primary">绀青</a-button>
    <a-button @click="changeColor('#72777b')" type="primary">银色</a-button>
    <a-button @click="changeColor('#aa363d')" type="primary">银朱</a-button>
    <a-button @click="changeColor('pink')" type="primary" style="margin:10px">
      pink
    </a-button>

    <a-input></a-input>

    <a-radio>Radio</a-radio>

    <a-rate />

    <a-slider />

    <a-switch />
  </div>
</template>
<script lang="ts">
import { ref, Ref } from "vue";
export default {
  setup() {
    const name: Ref<string> = ref("renyu");
    const color: Ref<string> = ref("pink");
    const value: Ref<string> = ref("renyu");
    const change = () => {
      // console.log("renyu");
      color.value = "green";
    };
    const changeColor = (color: string) => {
      (window as any).less.modifyVars({
        "@primary-color": color,
        "@border-color-base": color
      });
    };
    return {
      name,
      color,
      change,
      value,
      changeColor
    };
  }
};
</script>
<style lang="less" scope vars="{ color }">
.thyeme-box {
  padding: 20px;
  .name {
    font-size: 22px;
    color: var(--color);
  }
}
</style>

收工！

# vue.js
Logo
Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^

avatar Vue
cover

echarts堆叠柱状图

avatar Vue

Error in v-on handler: "TypeError: Cannot read properties of undefined (reading 'current')"

这是一个 Vue.js 错误，报错信息提示在 v-on 处理程序中出现了错误：“TypeError: Cannot read properties of undefined(读取 'current')”。这意味示在您的代码中，试图读取一个未定义的变量 'current'。您需要检查您的代码，确保 'current' 已正确定义并初始化。...

avatar Vue