【Ant-design引入】

Ant-design

1、uniapp引入

1、控制台输入vue add ant-design
2、main.js写入如下代码

import Antd from 'ant-design-vue'
import 'ant-design-vue/dist/antd.css';
Vue.use(Antd)

3、APP.vue中onLunch方法中改写入
Ps:若安装后出现初始界面变成App.vue这一界面可用此方案解决

onLaunch: function() {
	uni.redirectTo({
	url:"pages/index/index"
	})
	console.log('App Launch')
},

02/05/2022 16:42

2、vue2引入

1、控制台输入：npm install --save ant-design-vue@1.7.8
此时查看package.json文件，若在dependencies中找不到ant-design-vue则表明安装失败，自行百度报错，若果没有报错则可以换用yarn add ant-design-vue@1.7.8再次尝试安装
成功后截图如下：

注意ant-design vue的版本，未指定版本可能会安装最新3版本，不兼容Vue2
2、在main.js中引入
写入如下代码即可

import Antd from "ant-design-vue"
import "ant-design-vue/dist/antd.css"
Vue.use(Antd)

完整截图如下：

若运行后出现白屏问题，检查版本，确认无误后main.js中的引入请按照图示中顺序引入再次尝试
3、测试
在views目录下的Home.vue中写入<a-button type="primary">test</a-button>并运行

运行后截图：

出现如下蓝色按钮即为成功
02/05/2022 19:54