uniapp的UI框架组件库——uView

news2024/11/26 13:34:40

在写uniapp项目时候,官方所推荐的样式库并不能满足日常的需求,也不可能自己去写相应的样式,费时又费力,所以我们一般会去使用第三方的组件库UI,就像vue里我们所熟悉的elementUI组件库一样的道理,在uniapp中我们所使用的组件库是uView

一、组件库的使用 

uView组件官网:https://xuqu.gitee.io/

他的界面和elementui 的界面是很相似的,使用过elementui就一定会用 uView 

然后是安装uView

// 如果您的项目是HX创建的,根目录又没有package.json文件的话,请先执行如下命令:
// npm init -y

// 安装
npm install uview-ui

// 更新
npm update uview-ui

配置步骤

#1. 引入uView主JS库

在项目根目录中的main.js中,引入并使用uView的JS库,注意这两行要放在import Vue之后。

// main.js
import uView from "uview-ui";
Vue.use(uView);

#2. 在引入uView的全局SCSS主题文件

在项目根目录的uni.scss中引入此文件。

/* uni.scss */
@import 'uview-ui/theme.scss';

#3. 引入uView基础样式

注意!

App.vue首行的位置引入,注意给style标签加入lang="scss"属性

<style lang="scss">
	/* 注意要写在第一行,同时给style标签加入lang="scss"属性 */
	@import "uview-ui/index.scss";
</style>

#4. 配置easycom组件模式

此配置需要在项目根目录的pages.json中进行。

温馨提示

uni-app为了调试性能的原因,修改easycom规则不会实时生效,配置完后,您需要重启HX或者重新编译项目才能正常使用uView的功能。

// pages.json
{
	"easycom": {
		"^u-(.*)": "uview-ui/components/u-$1/u-$1.vue"
	},
	
	// 此为本身已有的内容
	"pages": [
		// ......
	]
}

 然后大家就可以根据右边的组件去使用所对应的需求样式就可以了

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/867609.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

基于grpc从零开始搭建一个准生产分布式应用(1) - 开始准备

开始前必读&#xff1a;​​基于grpc从零开始搭建一个准生产分布式应用(0) - quickStart​​ 本来笔者并不想开设这个系列&#xff0c;因为工作量比较大&#xff0c;另外此专题的技术点也偏简单。最近复盘了下最近的工作&#xff0c;发现一个问题就是各个互联网大厂一般都会有…

hbase 报错 Master passed us a different hostname to use; was=

原因 wsl2的 /etc/hosts 配置的不兼容,我这里是ubuntu22 修改为 127.0.0.1 ubuntu22 即可

Blazor 调试控制台

文章目录 设置 设置 Blazor项目启动之后&#xff0c;有好几种项目设置&#xff0c;我其实想要这一种控制台 直接Console.log就行了 public void LoginBtn(){Console.WriteLine("登录");//navigationManager.NavigateTo("/index");}

STM32 LL库开发

一、STM32开发方式 标准库开发&#xff1a;Standard Peripheral Libraries&#xff0c;STDHAL库开发&#xff1a;Hardware Abstraction Layer&#xff0c;硬件抽象层LL库开发&#xff1a;Low-layer&#xff0c;底层库 二、HAL库与LL库开发对比 ST在推行HAL库的时候&#xff0c;…

手机怎样换ip地址 更改手机IP地址有哪些方式

ip地址怎么改&#xff1a;使用深度ip转换器 在互联网时代&#xff0c;IP地址扮演着网络世界中的独特标识符。它是我们在上网时必不可少的元素&#xff0c;负责为设备提供独立的身份&#xff0c;并将信息传输到正确的目的地。然而&#xff0c;有时我们需要改变IP地址&#xff0c…

婚恋交友h5多端小程序开源版开发

婚恋交友h5多端小程序开源版开发 以下是婚恋交友H5多端小程序的功能列表&#xff1a; 用户注册和登录&#xff1a;用户可以通过手机号码或第三方账号注册和登录。个人信息填写&#xff1a;用户可以填写个人基本信息&#xff0c;包括姓名、性别、年龄、身高、体重、学历、职业等…

第11集丨Vue 江湖 —— 过滤器(filter)

目录 一、过滤器1.1 局部过滤器1.2 全局过滤器1.3 过滤器的串联1.4 案例 二、BootCDN2.1 在BootCDN下载dayjs2.2 dayjs官方文档 一、过滤器 过滤器&#xff1a; 定义&#xff1a;对要显示的数据进行特定格式化后再显示(适用于一些简单逻辑的处理&#xff09;。语法: a. 注册过…

阿里巴巴面试题---考察对底层源代码的熟悉程度

题目如图所示: 很多人可能会觉得两个输出都会是false,因为我们都会觉得""比较的是引用类型的地址,虽然放入的值都一样但是重新创造了新对象,地址不一样,所以结果都是false. 然而,当我们运行程序会发现结果都是false. 下面,我们来分析为什么是这样的结果. 我们知道…

nodejs+vue+elementui健身俱乐部网站rix1z

为设计一个安全便捷&#xff0c;并且使用户更好获取本健身俱乐部管理信息&#xff0c;本文主要有安全、简洁为理念&#xff0c;实现用户快捷寻找健身课程、健身器材、会员卡信息、新闻公告等信息&#xff0c;从而解决健身俱乐部管理信息复杂难辨的问题。该系统以vue架构技术为基…

Linux 目录和文件常见操作

就常见的命令&#xff1a; pwd pwd 显示当前的目录 目录迁移 我以如下的目录大致结构做一个简单的例子 cd 迁移到指定的路径&#xff0c;可以指定相对路径和绝对路径&#xff0c;默认相对 .指向当前路径&#xff0c;…/ 指向上一级的目录。 ls 列出文件及其目录 命令选…

取个对象值导致系统崩溃

取个对象值导致系统崩溃 前言 想必各位小伙经常在项目中遇到一些错误&#xff0c;取对象值的时候&#xff0c;经常报错,又或者某些项目突然就挂经常都是出现在一些对象取值上面&#xff0c;然后就被领导一顿训斥 报错分析 例如&#xff1a; 下面这个报错大家想必不会陌生&am…

华尔街之狼

&#xff08;1&#xff09; 我最近在重看一本书《物理学家走进华尔街》&#xff0c;顺便我还又重看了一遍《华尔街之狼》。 华尔街之狼&#xff0c;我最感兴趣三点&#xff1a; 垃圾产品&#xff1a;退市的垃圾股粉单 垃圾顾客&#xff1a;没有钱&#xff0c;但想发财的平民。就…

掌握Python的X篇_28_python包管理工具pip命令

本篇将会介绍在实际使用python中最能节省效率的内容&#xff0c;利用第三方库拿来就用。 文章目录 1. pip命令是什么2. pip相关操作2.1 list2.2 install2.3 uninstall2.4 导出和导入2.4.1 freeze命令2.4.2 “-r” 3. 国内镜像4. Python Packges Index网站 1. pip命令是什么 p…

mysql安装配置教程

mysql下载 mysql官网 mysql英文官网下载 mysql安装 解压安装包,如下效果 2.配置初始化文件my.ini 在根目录下创建一个txt文件&#xff0c;名字叫my&#xff0c;文件后缀为ini 之后复制下面这个代码放在文件下 &#xff08;新解压的文件没有my.ini文件&#xff0c;需自行创建…

QT界面的布局

QT界面的布局 qt 下的布局: 1.水平布局2.垂直布局3格布局 图片记得设置大小后在进行布局 文字居中

c++11-14-17_内存管理(RAII)_多线程

文章目录 前言&#xff1a;什么是RAII&#xff1f;指针/智能指针&#xff1a;使用智能指针管理内存资源&#xff1a;unique_ptr的使用&#xff1a;自定义删除器&#xff1a; shared_ptr的使用&#xff1a;shared_ptr指向同一个对象的不同成员&#xff1a;自定义删除函数&#x…

时序预测 | Python实现LSTM长短期记忆网络时间序列预测(电力负荷预测)

时序预测 | Python实现LSTM长短期记忆网络时间序列预测(电力负荷预测) 目录 时序预测 | Python实现LSTM长短期记忆网络时间序列预测(电力负荷预测)效果一览基本描述模型结构程序设计参考资料效果一览

英雄联盟LOL无法登录,登录后客户端转圈,客户端无法与登陆队列进行通讯,平台也许在维护

问题描述&#xff1a; 1、英雄联盟客户端登录后转圈&#xff0c;随后提示客户端无法与登陆队列进行通讯&#xff0c;平台也许在维护。 2、多试几次或许能登录&#xff0c;但打完该局游戏后客户端闪退&#xff0c;随后再也无法登录。 无效的解决方案&#xff1a;建议不要尝试…

江湖游历:Mysql操作内功、面向对象心法兼修秘籍

文章目录 前言一 PyMysql入门二 综合案例2.1 案例需求2.2 DDL定义2.3 实现步骤2.4 参考代码2.4.1 封装数据对象2.4.2 读取文件数据对象2.4.3 连接并写入数据库对象 2.5 1045错误解决 三 今日作业3.1 实现思路3.2 参考代码3.2.1 对象类的封装3.2.2 操作代码 3.3 出现的错误3.3.1…

java+springboot+mysql智能社区管理系统

项目介绍&#xff1a; 使用javaspringbootmysql开发的社区住户综合管理系统&#xff0c;系统包含超级管理员、管理员、住户角色&#xff0c;功能如下&#xff1a; 超级管理员&#xff1a;管理员管理&#xff1b;住户管理&#xff1b;房屋管理&#xff08;楼栋、房屋&#xff…