uni-app添加uview组件库

下载安装参考:https://uviewui.com/components/install.html
下载地址:https://ext.dcloud.net.cn/plugin?id=1593
使用下载的方式安装,能更方便阅读源码,但是每次升级都需要重新下载并覆盖uview-ui文件夹。

在uni-app插件市场右上角选择使用HBuilder X 导入插件或者下载插件ZIP
如果您的项目是由HBuilder X创建的标准uni-app项目,将下载后的uview-ui文件夹,复制到项目根目录。
如果您的项目是由vue-cli模式创建的, 请将下载后的uview-ui文件夹放到项目的src文件夹中即可。
注意: 此安装方式必须要按照下载方式安装的配置中的说明配置了才可用。

一、在跟目录的pages.json文件下粘贴入下:

	"easycom": {
		"^u-(.*)": "@/uview-ui/components/u-$1/u-$1.vue"
	},

由于uView使用easycom模式,让您无需引入组件即可直接使用,但是此功能需要Hbuilder X 2.5.5及以上版本才支持,详见配置easycom组件模式。 easycom打包的时候是按需引入的,您可以放心引入uView的整个组件库,发布打包时会自动剔除您没有使用的组件(注意:调试时仍然是全部引入的)

在这里插入图片描述
在main.js注入uviwe

import uView from 'uview-ui';
Vue.use(uView);

在uni.css中导入uview样式

/**
 * 下方引入的为uView UI的集成样式文件,为scss预处理器,其中包含了一些"u-"开头的自定义变量
 * 使用的时候,请将下面的一行复制到您的uniapp项目根目录的uni.scss中即可
 * uView自定义的css类名和scss变量,均以"u-"开头,不会造成冲突,请放心使用 
 */
@import 'uview-ui/theme.scss';

在app.vue中全局导入样式。

<style lang="scss">
	@import "uview-ui/index.scss";

uview的组件使用

<u-button type="primary">主要按钮</u-button>
<u-button type="success">成功按钮</u-button>
  • 0
    点赞
  • 8
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值