vite引入ant-design-vue組件庫

安裝

yarn add ant-design-vue@next

main.js

import {
	createApp
} from 'vue'
import Antd from 'ant-design-vue'
import App from './App.vue'
import './index.css'
// Antd
import 'ant-design-vue/dist/antd.css'

createApp(App).use(Antd).mount('#app')

使用

<template>
  <div>
		<p>	{{msg}}</p>
		<a-button type="primary" size="small" :loading="loading" @click="start">Loading</a-button>
		<StepBackwardOutlined style="color: red;" />
	</div>
</template>

<script>
import {ref} from 'vue'
import { StepBackwardOutlined} from '@ant-design/icons-vue';
export default {
  name: 'App',
  components: {StepBackwardOutlined},
	setup(){
		const loading=ref(false)
		const start=()=>{
			loading.value=true
		}
		
		return {
			loading,
			start
		}
	},
	data(){
		return {
			msg:'hello'
		}
	}
}
</script>

使用icon圖表

yarn add @ant-design/icons-vue -S

import { StepBackwardOutlined} from '@ant-design/icons-vue';
components: {StepBackwardOutlined},
<StepBackwardOutlined style="color: red;" />