【Ant-design引入】
Ant-design引入Ant-design1、uniapp引入2、vue2引入Ant-design1、uniapp引入1、控制台输入vue add ant-design2、main.js写入如下代码import Antd from 'ant-design-vue'import 'ant-design-vue/dist/antd.css';Vue.use(Antd)3、APP.vue中onLunc
·
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
更多推荐
已为社区贡献1条内容
所有评论(0)