1.下载依赖包
npm i ant-design-vue --save
npm i babel-plugin-import --dev
npm i less less-loader --save-dev
2.在babel.config.js里配置
{
"plugins": [
["import", { "libraryName": "ant-design-vue", "libraryDirectory": "es", "style": "css" }] // `style: true` 会加载 less 文件
]
}
3.在vue.config.js里进行css解析配置
module.exports = {
css: {
loaderOptions: { // 向 CSS 相关的 loader 传递选项
less: {
javascriptEnabled: true
}
}
}
}
4.创建ant-design文件夹并创建index.ts文件,index.ts内容如下
import {
Button,
TimePicker,
Layout,
Breadcrumb,
Menu
} from "ant-design-vue";
const components = [
Button,
TimePicker,
Layout,
Breadcrumb,
Menu
]
export default function Antd(app: any) {
components.forEach((component) => {
app.use(component)
})
}
5.在main.ts里引入Antd
import 'ant-design-vue/dist/antd.css'
import Antd from "./ant-design/index";
const app = createApp(App)
Antd(app)
app.use(store).use(router).mount('#app')
6.就可在页面进行使用啦
<template>
<div>
<a-button type="primary" danger>Primary</a-button>
<a-button danger>Default</a-button>
<a-button type="dashed" danger>Dashed</a-button>
<a-button type="text" danger>Text</a-button>
<a-button type="link" danger>Link</a-button>
</div>
</template>
如图展示: