uniapp使用antd组件库

组件库官网

https://www.antdv.com/docs/vue/introduce-cn

安装

在命令行终端输入

npm uni --save ant-design-vue

配置

我这里用的是uniapp的vue3版本模板

亲测不支持微信小程序，会报错，但是h5端可以，如果各位要使用，就可以尝试解决一下报错

在main.js里面引入

只要改下面带序号的地方即可

import App from './App'

// #ifndef VUE3
import Vue from 'vue'
import './uni.promisify.adaptor'
Vue.config.productionTip = false
App.mpType = 'app'
const app = new Vue({
  ...App
})
app.$mount()
// #endif

// 在下面引入，上面引入无效果
// #ifdef VUE3
import { createSSRApp } from 'vue'
import Antd from 'ant-design-vue' // 1
import 'ant-design-vue/dist/reset.css' // 2
export function createApp() {
  const app = createSSRApp(App)
  app.use(Antd) // 3
  return {
    app
  }
}
// #endif

在页面内直接使用

<template>
	<div>
		 <a-space wrap>
		    <a-button type="primary">Primary Button</a-button>
		    <a-button>Default Button</a-button>
		    <a-button type="dashed">Dashed Button</a-button>
		    <a-button type="text">Text Button</a-button>
		    <a-button type="link">Link Button</a-button>
		  </a-space>
	</div>
</template>

<script setup>
</script>

<style scoped>

</style>