前言
在 Vue 2 中使用 Vite 和 Ant Design Vue(antdv)并自定义主题颜色,你需要遵循以下步骤:
1. 安装依赖:
使用 npm 或 yarn 安装所需的依赖:
npm install --save ant-design-vue@1.x
npm install --save-dev less@3 less-loader
或
yarn add ant-design-vue@1.x
yarn add --dev less@3 less-loader
less@3 才行哦 如果是 less4 可能会报错格式问题
配置 Vite:
在项目根目录下创建或编辑
vite.config.js
文件,添加以下内容:import {createVuePlugin} from 'vite-plugin-vue2'; export default { plugins: [createVuePlugin() ], css: { preprocessorOptions: { less: { modifyVars: { // 在此处自定义主题变量 'primary-color': '#1DA57A', 'link-color': '#1DA57A', 'border-radius-base': '2px', // 或者引入自定义主题 // hack:
true; @import (reference) "${resolve('src/style/theme.less')}";
, }, javascriptEnabled: true, }, }, }, };这里我们使用了
vite-plugin-style-import
插件来按需加载 antdv 的样式,并使用less
和less-loader
来处理和自定义主题颜色。在项目中引入和使用 Ant Design Vue:
在你的 Vue 2 项目的入口文件(通常是
main.js
或main.ts
)中,引入并使用 Ant Design Vue:import Vue from 'vue'; import Antd from 'ant-design-vue'; import 'ant-design-vue/dist/antd.less'; // 修改定制主题这里必须是引入 lses Vue.use(Antd);
现在你已经成功地在 Vue 2 项目中使用了 Vite 和 Ant Design Vue,并自定义了主题颜色。你可以在vite.config.js
文件中的modifyVars
对象里修改更多的主题变量。更多关于 Ant Design Vue 主题定制的信息,请参考官方文档:https://1x.antdv.com/docs/vue/customize-theme-cn/
正文完