使用 npm 或 yarn 安装Ant Design Vue
npm i --save ant-design-vue@next
yarn add ant-design-vue
安装/配置babel-plugin-import插件
npm install babel-plugin-import -D
安装/配置less+less-loader插件
npm install less less-loader --save-dev
babel.config.js文件
module.exports = {
presets: [
'@vue/cli-plugin-babel/preset'
],
plugins: [
[
"import",
{libraryName: "ant-design-vue", libraryDirectory: "es", style: true} // `style: true` 会加载 less 文件
]
]
}
vue.config.js文件
module.exports = {
css: {
loaderOptions: {
less: {
javascriptEnabled: true
}
}
}
}
module.exports = {
css: {
loaderOptions: {
less: {
lessOptions: {
javascriptEnabled: true
}
}
}
}
}
配置需要按需引入的组件
- main.js
- 如果组件多的话可以新建 antd.js 文件, 仅用于引入必须的组件,在main.js文件引入遍历use
import { createApp } from 'vue'
import App from './App.vue'
import { Button} from 'ant-design-vue'
createApp(App).use(Button).mount('#app')
<a-button type="primary" ghost>Primary</a-button>
<a-button >Default</a-button>
<a-button type="dashed" >Dashed</a-button>
<a-button type="primary" danger ghost>Danger</a-button>