前言
在Idea中使用Vue,同时引入UI组件 Ant Design Vue
Ant Design Vue简介
官网： www.antdv.com/docs/vue/in…
集成 Ant Design Vue
1、安装Ant Design Vue
npm install ant-design-vue@2.0.0-rc.3 --save
2.0.0-rc.3 是项目需求的版本，按实际需要选择对应的版本。
安装成功后，在Idea的git代码对比中可以看到添加了新的依赖：
2、引入组件
在web/src/main.ts中引入 ant-design-vue
import Antd from 'ant-design-vue'; // 引入 ant-design-vue
import 'ant-design-vue/dist/antd.css'; // 引入 ant-design-vue css样式
// 使用 ant-design-vue
createApp(App).use(Antd)
实际代码：
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import Antd from 'ant-design-vue'; // 引入 ant-design-vue
import 'ant-design-vue/dist/antd.css'; // 引入 ant-design-vue css样式
createApp(App).use(store).use(router).mount('#app')
// 使用 ant-design-vue
createApp(App).use(Antd)
由于已经存在createApp(App)所以直接添加.use(组件)。
变为：
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import Antd from 'ant-design-vue'; // 引入 ant-design-vue
import 'ant-design-vue/dist/antd.css'; // 引入 ant-design-vue css样式
createApp(App).use(store).use(router).use(Antd).mount('#app')
按钮案例
按钮页面：2x.antdv.com/components/…
以引入danger按钮为例
1、复制所需按钮样式的代码
<a-button danger :size="size">Danger</a-button>
2、粘贴至web/src/views/Home.vue
<template>
<div class="home">
<a-button danger :size="size">Danger</a-button>
<img alt="Vue logo" src="../assets/logo.png">
<HelloWorld msg="Welcome to Your Vue.js + TypeScript App"/>
</div>
</template>
<script lang="ts">
import { defineComponent } from 'vue';
import HelloWorld from '@/components/HelloWorld.vue'; // @ is an alias to /src
export default defineComponent({
name: 'Home',
components: {
HelloWorld,
},
});
</script>
3、启动服务
4、预览页面
总结
使用 Ant Design Vue的步骤
- 安装Ant Design Vue
- 在页面中引入组件
