ant-design-vue运行时切换主题

目录

创建项目

安装并引入 ant-design-vue

按需引入antd

定制主题

提取antd的less变量文件

切换主题

项目地址

---

创建项目

可以参照https://vue.ant.design/docs/vue/use-with-vue-cli-cn/创建项目并引入ant-design-vue

1、使用vue-cli V3.0+创建项目

2、选择css预处理器（其他的根据项目所需选择）

 

 

3、由于ant-design-vue的样式使用的是less作为开发语言，所以这里我们选择Less

4、其他的根据自己的需要配置即可

 

5、注意：项目创建完成后，需要将less的版本号改成3.0以下，否则后面再更改主题时会出错！！！这里改成了2.7.2

改完后保存，并重新下载依赖

npm install

6、下载完后启动项目，在浏览器输入localhost:8080就可以看到创建好的项目啦

npm run serve

 

 

安装并引入 ant-design-vue

1、在项目目录下输入命令安装ant-design-vue

2、然后在main.js中添加所需的antd组件（全局添加样式）

// 全局引入antd import 
Button from "ant-design-vue/lib/button"; 
import "ant-design-vue/dist/antd.css"; 

Vue.component(Button.name, Button);

 

3、在HelloWorld.vue中使用组件，删除其他不必要的代码，然后添加一个按钮

<a-button type="primary">测试</a-button>