- Vue Version: 2.6
- Ant Design Vue Version: 1.5
- Vue CLI Version: 3+
- less-loader Version: 6
startup
$ vue create <project>
$ cd <project>
<p>$ yarn add ant-design-vue -S
按需加载
$ yarn add babel-plugin-import -D
// babel.config.js or .babelrc
module.exports = {
presets: [
'@vue/cli-plugin-babel/preset'
],
+ plugins: [
+ // 此处 style 如果设置为 'css', 会按需引入 css 文件，因为之后要覆盖默认less样式，所以此处设置为true
+ ['import', { libraryName: 'ant-design-vue', style: true }]
+ ]
}
// antd-config.js
import Vue from 'vue'
// 按需加载在 babel.config.js 中配置
import {
message,
Card, Button, Table, Icon,
} from 'ant-design-vue'
[ Card, Button, Table, Icon ]
.forEach(AntdComponent => Vue.use(AntdComponent))
Vue.prototype.$message = message
配置主题样式
<p>$ yarn add less-loader -D
css: {
loaderOptions: {
less: {
+ lessOptions: { // 官方文档没有这层
modifyVars: {
'primary-color': '#1DA57A',
'link-color': '#1DA57A',
'border-radius-base': '2px',
},
javascriptEnabled: true
+ }
}
}
},
