如何在 Vue3 中引入并安装 Ant Design Vue?
时间: 2024-12-16 07:19:41 浏览: 6
在 Vue3 中引入和安装 Ant Design Vue 需要几个步骤:
1. **安装依赖**:
使用 npm 或者 yarn 来安装 Ant Design Vue 和它所需的依赖。如果你使用的是 `npm`,可以在项目根目录运行:
```
npm install ant-design-vue @ant-design/icons --save
```
如果你更喜欢 `yarn`,则运行:
```
yarn add ant-design-vue @ant-design/icons
```
2. **配置文件**:
更新你的 `main.js` 或者 `vite.config.js` (如果是使用 Vite),需要引入 CSS 并全局注册组件。例如,在 `main.js` 中添加:
```javascript
import { createApp } from 'vue'
import App from './App.vue'
import { Antd } from 'ant-design-vue'
// 加载 Ant Design Vue 的 CSS
import 'ant-design-vue/dist/antd.css'
createApp(App).use(Antd).mount('#app')
```
3. **使用组件**:
现在你可以开始在你的 Vue 组件中使用 Ant Design Vue 提供的各种 UI 组件了。例如,导入并使用 Button 组件:
```html
<template>
<a-button type="primary">点击我</a-button>
</template>
```
阅读全文