目錄
創建項目
安裝并引入 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>
4、重新啟動項目，刷新瀏覽器，即可看到默認主題的按鈕
按需引入antd
可以使用 babel-plugin-import 的方式按需引入組件
https://vue.ant.design/docs/vue/use-with-vue-cli-cn/高級配置
1、首先安裝babel-plugin-import
npm add babel-plugin-import --dev
2、然后在babel.config.js中添加配置
plugins: [ [ "import", { libraryName: "ant-design-vue", libraryDirectory: "es", style: true } ] ]
3、移除前面在 src/main.js 里全量添加的 import 'ant-design-vue/dist/antd.css'; 樣式代碼，并且按下面的格式引入模塊。
// 按需引入antd
import { Button } from "ant-design-vue";
4、最后重啟 npm run serve 訪問頁面，antd 組件的 js 和 css 代碼都會按需加載
定制主題
https://vue.ant.design/docs/vue/customize-theme-cn/在-vue-cli-3中定制主題
1、項目根目錄下新建文件vue.config.js，添加如下代碼
// vue.config.js
module.exports = {
css: {
loaderOptions: {
less: {
modifyVars: {
"primary-color": "#1DA57A",
"link-color": "#1DA57A",
"border-radius-base": "2px"
},
javascriptEnabled: true
}
}
}
};
2、保存重啟并訪問頁面后就可以看到定制的主題了
但官方提供的這種方式只能在編譯時改變主題，無法在運行性動態切換。下面就是本文的重點，如何實現在運行時動態切換主題。
提取antd的less變量文件
我們的思路就是提取ant-design-vue中所有的less代碼匯總到一個文件中，然后在index.html頁面中直接引用，最后使用less.js中的modifyVars方法修改主題變量，這樣antd的樣式就不會被編譯，實現運行時動態切換
1、首先安裝提取less文件的插件antd-theme-webpack-plugin
npm install -D antd-theme-webpack-plugin
2、修改vue.config.js，配置并使用插件，詳細說明見以下兩個網址
https://github.com/mzohaibqc/antd-theme-webpack-plugin
https://medium.com/@mzohaib.qc/ant-design-dynamic-runtime-theme-1f9a1a030ba0
const AntDesignThemePlugin = require("antd-theme-webpack-plugin");
const path = require("path");
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"], //要改變的主題變量
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 = {
css: {
loaderOptions: {
less: {
modifyVars: {
// "primary-color": "#1DA57A",
// "link-color": "#1DA57A",
// "border-radius-base": "2px"
},
javascriptEnabled: true
}
}
},
configureWebpack: {
plugins: [new AntDesignThemePlugin(options)]
}
};
3、options 中的路徑一定要和實際項目一致！
4、在variables.less文件中添加主題變量（一定要與options中的themeVariables一致！）
//variables.less //一定要加上這一行！！！ @import "~ant-design-vue/lib/style/themes/default.less"; @primary-color: #992777;
5、index.less可以為空
6、然后npm run serve 運行項目就可以在你設置的目錄下看到提取的less文件了
切換主題
拿到color.less文件，下面就好辦了。
1、修改index.html
首先引入提取的color.less文件；
然后定義并配置全局變量less
最后引入less.js文件（放在最后）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<title>antd-vue-theme-demo</title>
</head>
<body>
<noscript>
<strong>We're sorry but antd-vue-theme-demo doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript>
<!-- 引入提取的color.less文件 -->
<link rel="stylesheet/less" type="text/css" href="./color.less" />
<script>
window.less = {
async: false,
env: 'production'//production development
};
</script>
<div id="app"></div>
<!-- 引入less.js文件（放在最后） -->
<script src="https://cdn.bootcss.com/less.js/2.7.3/less.min.js"></script>
<!-- built files will be auto injected -->
</body>
</html>
2、下面寫個簡單的例子，使用window.less.modifyVars()方法修改主題
修改HelloWorld.vue，代碼如下
<template>
<div class="hello">
<h1>{{ msg }}</h1>
<a-button type="primary" @click="changeTheme('#992777')">默認</a-button
><br /><br />
<a-button type="primary" @click="changeTheme('#F5222D')">薄暮</a-button
><br /><br />
<a-button type="primary" @click="changeTheme('#FA541C')">火山</a-button
><br /><br />
<a-button type="primary" @click="changeTheme('#FAAD14')">日暮</a-button
><br /><br />
<a-button type="primary" @click="changeTheme('#13C2C2')">明青</a-button
><br /><br />
<a-button type="primary" @click="changeTheme('#52C41A')">極光綠</a-button
><br /><br />
<a-button type="primary" @click="changeTheme('#1890FF')">拂曉藍</a-button
><br /><br />
<a-button type="primary" @click="changeTheme('#2F54EB')">極客藍</a-button
><br /><br />
<a-button type="primary" @click="changeTheme('#722ED1')">醬紫</a-button
><br /><br />
</div>
</template>
<script>
export default {
name: "HelloWorld",
props: {
msg: String
},
methods: {
changeTheme(primaryColor) {
window.less.modifyVars({
"@primary-color": primaryColor
});
}
}
};
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less"></style>
3、重啟項目，大功告成！！！
