[保姆级教程]uniapp安装使用uViewUI教程
文章目录
- 创建 UniApp 项目
- 下载uView UI
- 下载安装方式
- 步骤 1: 安装 uView UI
- 步骤 2: 查看uView UI是否下载成功
- 步骤 3: 引入 uView 主 JS 库
- 步骤 4: 引入 uView 的全局 SCSS 主题文件
- 步骤 5: 引入 uView 基础样式
- 步骤 6: 配置 easycom 组件模式
- 注意事项
- NPM方式
- 步骤 1: 安装 uView UI
- 步骤 2: 配置 uView UI
- 使用uView UI组件
创建 UniApp 项目
首先,确保你已经安装好了 Node.js 和 HBuilderX(或者使用其他支持 UniApp 的开发环境)。
-
安装 HBuilderX:如果你还没有安装 HBuilderX,可以到官网下载并安装:HBuilderX 官网。
-
创建 UniApp 项目:
- 打开 HBuilderX,选择「新建项目」。
- 选择「UniApp」,然后点击「下一步」。
- 输入项目名称和路径,选择模板(比如「默认模板」),然后点击「完成」创建项目。
前情步骤,可查看以下文章
[巨详细]安装HBuilder-X教程
[巨详细]使用HBuilder-X新建uniapp项目教程
下载uView UI
官网地址:uView UI 官网:https://uviewui.com/
下载地址:uView UI下载:https://ext.dcloud.net.cn/plugin?id=1593
uView UI 目前分为下载安装和npm安装两种,各有利弊具体区别看官网
下载安装方式
步骤 1: 安装 uView UI
点击下载地址:uView UI下载:https://ext.dcloud.net.cn/plugin?id=1593
点击下载并导入hbuilder
选择合适的项目,点击确定安装
出现导入成功就是安装成功了。
步骤 2: 查看uView UI是否下载成功
有uni_modules文件夹或者uview-ui文件夹在根目录就是下载成功了。
步骤 3: 引入 uView 主 JS 库
在项目根目录中的 main.js
文件中引入并使用 uView 的 JS 库。
// main.js
import Vue from 'vue';
import uView from 'uview-ui';Vue.use(uView);
步骤 4: 引入 uView 的全局 SCSS 主题文件
在项目根目录的 uni.scss
文件中引入 uView 的 SCSS 主题文件。
/* uni.scss */
@import 'uview-ui/theme.scss';
步骤 5: 引入 uView 基础样式
在 App.vue
中的 <style>
标签中的首行位置引入 uView 的基础样式,确保给 <style>
标签加入 lang="scss"
属性。
<!-- App.vue -->
<style lang="scss">/* 注意要写在第一行,同时给style标签加入lang="scss"属性 */@import "uview-ui/index.scss";
</style>
步骤 6: 配置 easycom 组件模式
在项目根目录的 pages.json
文件中配置 easycom 组件模式,确保 uView 的组件可以在项目中被正确引用。
// pages.json
{"easycom": {"^u-(.*)": "@/uview-ui/components/u-$1/u-$1.vue"},// 此为本身已有的内容"pages": [// ......]
}
注意事项
- 确保在
main.js
中引入 uView 的操作放在import Vue from 'vue';
之后。 - 需要重启或重新编译项目以使 easycom 的配置生效。
- 检查
uni.scss
和App.vue
中的样式引入语句是否正确,确保路径和文件名与实际 uView 所在位置一致。
通过以上步骤,你已经成功地将 uView UI 集成到了你的 UniApp 项目中,并可以开始使用其提供的丰富组件和样式来构建界面。
NPM方式
安装和使用 uView UI 在 UniApp 中是相对简单的过程,下面我来为你提供一个基本的教程。
步骤 1: 安装 uView UI
接下来,我们需要在 UniApp 项目中安装 uView UI。
-
打开终端:
- 在 HBuilderX 中,点击菜单栏的「工具」->「开发者工具」->「终端」,这样就可以打开终端。
-
使用 npm 安装 uView UI:
- 在终端中输入以下命令来安装 uView UI:
npm install uview-ui
- 或者使用 yarn 安装:
yarn add uview-ui
步骤 2: 配置 uView UI
安装完成 uView UI 后,需要在项目中进行配置。
- 在
pages.json
文件中,将uview-ui
的样式文件引入到globalStyle
字段中,例如:
"globalStyle": {"navigationBarTextStyle": "black","navigationBarTitleText": "uni-app","navigationBarBackgroundColor": "#F8F8F8","backgroundColor": "#F8F8F8","app-plus": {"preload": {"preloadRule": {"path": "pages/index/index.vue","style": {"loading": true}}}},"usingComponents": {"u-loading": "uview-ui/components/u-loading/u-loading"}}
- 在需要使用 uView UI 的页面中,例如
index.vue
,可以像使用其他组件一样直接使用 uView UI 的组件,例如:
<template><view><u-loading :show="true" :type="'chiaroscuro'" :color="'#007AFF'" :text="'加载中...'"></u-loading></view></template><script>export default {data() {return {}}}</script>
- 上述代码中,我们使用了 uView UI 的
u-loading
组件来展示一个加载中的提示。
使用uView UI组件
用按钮为案例
复制到文档中
<u-button type="primary" text="确定"></u-button><u-button type="primary" :plain="true" text="镂空"></u-button>
项目展示效果:
您好,我是肥晨。
欢迎关注我获取前端学习资源,日常分享技术变革,生存法则;行业内幕,洞察先机。
相关文章:
[保姆级教程]uniapp安装使用uViewUI教程
文章目录 创建 UniApp 项目下载uView UI下载安装方式步骤 1: 安装 uView UI步骤 2: 查看uView UI是否下载成功步骤 3: 引入 uView 主 JS 库步骤 4: 引入 uView 的全局 SCSS 主题文件步骤 5: 引入 uView 基础样式步骤 6: 配置 easycom 组件模式注意事项 NPM方式步骤 1: 安装 uVi…...
网络安全法规对企业做等保有哪些具体规定?
网络安全法规对企业做等保的具体规定 根据《中华人民共和国网络安全法》,企业作为网络运营者,需要履行网络安全等级保护制度的相关义务,确保网络安全和数据保护。具体规定包括: 网络安全等级保护制度:企业应根据网络安…...
Java开发中超好用Orika属性映射工具
Orika属性映射工具 引入pom依赖 <dependency><groupId>ma.glasnost.orika</groupId><artifactId>orika-core</artifactId><version>1.5.4</version></dependency>上干货 封装的工具类:OriUtilsimport ma.glasnost.orika.Map…...
qt初入门8:下拉框,输入框模糊查询,提示简单了解 (借助QCompleter)
实现一个简单的模糊查询的逻辑,输入框能提示相关项。 主要借助qt的QCompleter 类( Qt 框架中提供的一个用于自动补全和模糊搜索的类),结合一些控件,比如QComboBox和QLineEdit,实现模糊查询的功能。 1&…...
【qt】VS中如何配置Qt环境
https://download.qt.io/official_releases/vsaddin/ 首先需要下载一下vsaddin,上面的是下载的网站. 下载的时候可能会出现下图的情况 说明你下的vsaddin和您的VS版本不匹配,所以你可以多下几个其他版本的vsAddin,一般都是和你VS版本相匹配的才可以,如Vs2022,那就试试vsaddin2…...
对于相同网段的IP,部分无法ping通问题
现象1:在Linux上执行 ping 192.168.1.232,无法ping通 分析1:使用ifconfig查询,联网使用eth0口,只能上网192.168.10.xx网段,需要增加网段 解决方法:使用ip addr 查询,本身只具备10网…...
Unity发布XR中用于worldbuilding的全新电子书
通过身临其境的虚拟领域开始旅程,在维度之间传送,或将数字奇迹与现实世界融合——虚拟现实(VR)和混合现实(MR)的千万种可能性将邀请创作者把他们的想象力带入生活。 Unity发布的最新版综合指南将帮助有抱负的创作者和经验丰富的开发者深入研究和理解构建…...
Vue3相比于Vue2进行了哪些更新
1、响应式原理 vue2 vue2中采用 defineProperty 来劫持整个对象,然后进行深度遍历所有属性,给每个属性添加getter和setter,结合发布订阅模式实现响应式。 存在的问题: 检测不到对象属性的添加和删除数组API方法无法监听到需要对…...
Unity UGUI 之 Slider
本文仅作学习笔记与交流,不作任何商业用途 本文包括但不限于unity官方手册,唐老狮,麦扣教程知识,引用会标记,如有不足还请斧正 1.Slider是什么 滑块,由三部分组成:背景 填充条 手柄 填充条就是…...
这7款高效爬虫工具软件,非常实用!
在当今数据驱动的时代,自动化爬虫工具和软件成为了许多企业和个人获取数据的重要手段。这里会介绍6款功能强大、操作简便的自动化爬虫工具,用好了可以更高效地进行数据采集。 1. 八爪鱼采集器 八爪鱼是一款功能强大的桌面端爬虫软件,主打可…...
【OJ】二叉树相关OJ题
✨✨欢迎大家来到Celia的博客✨✨ 🎉🎉创作不易,请点赞关注,多多支持哦🎉🎉 所属专栏:OJ题 个人主页:Celias blog~ 目录 编辑 单值二叉树 题目描述 OJ-单值二叉树 解题思路 …...
Blender中保存透明图片
在Blender中保存透明图片,主要是通过在渲染设置中调整背景透明度,并选择合适的文件格式来保存图像。以下是一个详细的步骤指南: 一、设置渲染属性 打开Blender并加载你想要渲染的模型。在右侧的属性编辑器中,找到并点击“渲染属…...
MySQL之索引优化
1、在进行查询时,索引列不能是表达式的一部分,也不能是函数的参数,否则无法使用索引 例如下面的查询不能使用 actor_id 列的索引: #这是错误的 SELECT actor_id FROM sakila.actor WHERE actor_id 1 5; 优化方式:…...
Spring Boot 与 Amazon S3:快速上传与下载文件的完整指南
概要 在将 Spring Boot 更新到 3 系列时,由于 javax 需要被替换为 jakarta,因此原先依赖于 javax 的 spring-cloud-starter-aws1 将无法使用(虽然在我本地环境中仍然可以正常工作)。为了确保兼容性,我将依赖关系更改为…...
细节剖析:HTTP与HTTPS在安全性、性能等方面的不同!
HTTPS是现代互联网通信的重要基石,通过加密通信、身份验证和数据完整性保护,为数十亿用户提供了安全可靠的互联网体验。 小编整理了2GB程序员相关资料,关注微信公众号“程序员Style”回复“程序员”免费领取! 1、介绍 随着 HTT…...
MySQL面试篇章——MySQL索引
文章目录 MySQL 索引索引分类索引创建和删除索引的执行过程explain 查看执行计划explain 结果字段分析 索引的底层实现原理B-树B树哈希索引 聚集和非聚集索引MyISAM(\*.MYD,*.MYI)主键索引辅助索引(二级索引) InnoDB&a…...
WSL 2 Oracle Linux 9.1 安装配置
文章目录 环境使用体验安装 Oracle Linux 9.1修改默认存储路径默认 root 用户登录启用 systemd启用 SSH 连接WSL 无法 ping 通宿主机和域名WSL 使用主机代理(测试通过)WSL 常用命令 环境 OS:Win11 24H2 (OS 内部版本26120.1252) wsl --versio…...
MySQL日志文件详解
MySQL中的日志文件是MySQL数据库系统的重要组成部分,它们记录了数据库的运行情况、用户操作、错误信息等,对于数据库的维护、优化、故障排查和恢复都具有重要意义。以下是MySQL中几种主要日志文件的详解: 1. 二进制日志(Binary L…...
MySQL零散拾遗(三)
在mysql中,JOIN ON 和 WHERE 的作用和用法是怎么样的? 在MySQL中,JOIN语句用于将两个或多个表根据指定的关联条件合并成一个新的结果集。JOIN ON和WHERE子句在JOIN语句中扮演着不同的角色,它们的用法和作用如下: JOI…...
鸿蒙 使用 Refresh 实现下拉刷新
import promptAction from ohos.promptActionEntry Component struct Index {Staterefreshing: boolean falseStatelist: number[] Array(20).fill(Date.now())Buildercontent(){Stack(){Row(){LoadingProgress().height(32)Text(正在刷新...).fontSize(16).margin({left:20}…...
【JavaScript 算法】图的遍历:理解图的结构
🔥 个人主页:空白诗 文章目录 一、深度优先搜索(DFS)深度优先搜索的步骤深度优先搜索的JavaScript实现 二、广度优先搜索(BFS)广度优先搜索的步骤 三、应用场景四、总结 图的遍历是图论中的基本操作之一&am…...
Ubuntu 中默认的 root 用户密码
场景:想要切换root用户,发现得输入密码,以为是以前设置过然后一直尝试都是错误【认证失败】最后发现根本没设置过root用户,默认会随机生成root用户的密码😅 Ubuntu 中默认的 root 密码是随机的,即每次开机都…...
Rust编程-高级特性
unsafe:内存不安全 内存安全问题,例如空指针解引用 关键字unsafe来切换到不安全模式,并在被标记后的代码块中使用不安全代码 使用unsafe告诉编译器后面代码安全性自行负责 因为电脑硬件安全问题,必须编写可能不安全的代码 可以将…...
JavaRegexImprove练习(1) (2024.7.22)
ImproveExercise1 package RegexImprove20240722; import java.util.Scanner; public class ImproveExercise {public static void main(String[] args) {Scanner sc new Scanner(System.in);System.out.println("请输入一个字符串");String str sc.nextLine();//…...
基于YOLO模型的鸟类识别系统
鸟类识别在生物研究和保护中具有重要意义。本文将详细介绍如何使用YOLO(You Only Look Once)模型构建一个鸟类识别系统,包括UI界面、YOLOv8/v7/v6/v5代码以及训练数据集。 目录 2. 环境配置 2.1 安装Python和相关库 2.2 安装YOLO模型库 …...
WebRTC通话原理(SDP、STUN、 TURN、 信令服务器)
文章目录 1.媒体协商SDP简介 2.网络协商STUN的工作原理TURN工作原理 3.信令服务器信令服务器的主要功能信令服务器的实现方式 1.媒体协商 比如下面这个例子 A端与B端要想通信 A端视频采用VP8做解码,然后发送给B端,B端怎么解码? B端视频采用…...
面试场景题系列--(1)如果系统的 QPS 突然提升 10 倍该怎么设计?--xunznux
1. 如果系统的 QPS 突然提升 10 倍该怎么设计? 1.1 硬件的扩展微服务的拆分 如果所有的业务包括交易系统、会员信息、库存、商品等等都夹杂在一起,当流量一旦起来之后,单体架构的问题就暴露出来了,机器挂了所有的业务就全部无法…...
【数学建模】——前沿图与网络模型:新时代算法解析与应用
目录 1.图与网络的基本概念 1. 无向图和有向图 2. 简单图、完全图、赋权图 3. 顶点的度 4. 子图与图的连通性 2.图的矩阵表示 1. 关联矩阵 2. 邻接矩阵 3.最短路问题 1.Dijkstra 算法 2.Floyd 算法 4.最小生成树问题 1.Kruskal 算法 2.Prim 算法 5.着色问题 6.…...
视频分帧【截取图片】(YOLO目标检测【生成数据集】)
高效率制作数据集【按这个流程走,速度很顶】 本次制作,1059张图片【马路上流动车辆】 几乎就是全自动了,只要视频拍得好,YOLO辅助制作数据集就效率极高 视频中的图片抽取: 【由于视频内存过大,遇到报错执行…...
Redis7(二)Redis持久化双雄
持久化之RDB RDB的持久化方式是在指定时间间隔,执行数据集的时间点快照。也就是在指定的时间间隔将内存中的数据集快照写入磁盘,也就是Snapshot内存快照,它恢复时再将硬盘快照文件直接读回到内存里面。 RDB保存的是dump.rdb文件。 自动触发…...
发布支持TS的npm包
你现在有这么一个包,已经将他发布在npm上了,周下载量也还比较可观。美中不足的就是,这个包之前使用js写的,现在你想增加TS类型,提升用户使用体验,那么你现在可以做以下几个步骤 1.在你的包的根目录下创建一…...
计算机视觉9 全卷积网络
全卷积网络(Fully Convolutional Network,简称 FCN)在计算机视觉领域具有重要地位。 传统的卷积神经网络(CNN)在最后的输出层通常使用全连接层来进行分类任务。然而,全连接层会丢失空间信息,使得…...
02.C++入门基础(下)
1.函数重载 C支持在同一作用域中出现同名函数,但是要求这些同名函数的形参不同,可以是参数个数不同或者类型不同。这样C函数调用就表现出了多态行为,使用更灵活。C语言是不支持同一作用域中出现同名函数的。 1、参数类型不同 2、参数个数不同…...
【数据结构】探索排序的奥秘
若有不懂地方,可查阅我之前文章哦! 个人主页:小八哥向前冲~_csdn博客 所属专栏:数据结构_专栏 目录 排序的概念 几种排序方法介绍 冒泡排序 选择排序 插入排序 堆排序 向上调整建堆排序 向下调整建堆排序 希尔排序 快速…...
数据结构面试知识点总结3
#来自ウルトラマンティガ(迪迦) 1 线性表 最基本、最简单、最常用的一种数据结构。一个线性表是 n 个具有相同特性的数据元素的有限序列。 特征:数据元素之间是一对一的逻辑关系。 第一个数据元素没有前驱,称为头结点࿱…...
python-爬虫实例(5):将进酒,杯莫停!
目录 前言 将进酒,杯莫停! 一、浇给 二、前摇 1.导入selenium库 2.下载浏览器驱动 三、爬虫四步走 1.UA伪装 2.获取url 3.发送请求 4.获取响应数据进行解析并保存 总结 前言 博主身为一个农批,当然要尝试爬取王者荣耀的东西啦。 将进…...
AGI 之 【Hugging Face】 的【从零训练Transformer模型】之二 [ 从零训练一个模型 ] 的简单整理
AGI 之 【Hugging Face】 的【从零训练Transformer模型】之二 [ 从零训练一个模型 ] 的简单整理 目录 AGI 之 【Hugging Face】 的【从零训练Transformer模型】之二 [ 从零训练一个模型 ] 的简单整理 一、简单介绍 二、Transformer 1、模型架构 2、应用场景 3、Hugging …...
十大排序的稳定性和时间复杂度
十大排序算法的稳定性和时间复杂度是数据结构和算法中的重要内容。 以下是对这些算法的稳定性和时间复杂度的详细分析: 稳定性 稳定性指的是排序算法在排序过程中是否能够保持相等元素的原始相对顺序。根据这个定义,我们可以将排序算法分为稳定排序和…...
【系列教程之】1、点亮一个LED灯
1、点亮一个LED灯 作者将狼才鲸创建日期2024-07-23 CSDN教程目录地址:【目录】8051汇编与C语言系列教程本Gitee仓库原始地址:才鲸嵌入式/8051_c51_单片机从汇编到C_从Boot到应用实践教程 本源码包含C语言和汇编工程,能直接在电脑中通过Keil…...
搜维尔科技:Manus Metagloves使用精确的量子跟踪技术捕捉手部每一个细节动作
Manus Metagloves使用精确的量子跟踪技术捕捉手部每一个细节动作 搜维尔科技:Manus Metagloves使用精确的量子跟踪技术捕捉手部每一个细节动作...
机器学习 | 阿里云安全恶意程序检测
目录 一、数据探索1.1 数据说明1.2 训练集数据探索1.2.1 数据特征类型1.2.2 数据分布1.2.3 缺失值1.2.4 异常值1.2.5 标签分布探索 1.3 测试集探索1.3.1 数据信息1.3.2 缺失值1.3.3 数据分布1.3.4 异常值 1.4 数据集联合分析1.4.1 file_id 分析1.4.2 API 分析 二、特征工程与基…...
python打包exe文件-实现记录
1、使用pyinstaller库 安装库: pip install pyinstaller打包命令标注主入库程序: pyinstaller -F.\程序入口文件.py 出现了一个问题就是我在打包运行之后会出现有一些插件没有被打包。 解决问题: 通过添加--hidden-importcomtypes.strea…...
基本的DQL语句-单表查询
一、DQL语言 DQL(Data Query Language 数据查询语言)。用途是查询数据库数据,如SELECT语句。是SQL语句 中最核心、最重要的语句,也是使用频率最高的语句。其中,可以根据表的结构和关系分为单表查询和多 表联查。 注意:所有的查询…...
Vue3 对比 Vue2
相关信息简介2020年9月18日,Vue.js发布3.0版本,代号:One Piece(海贼王) 2 年多开发, 100位贡献者, 2600次提交, 600次 PR、30个RFC Vue3 支持 vue2 的大多数特性 可以更好的支持 Typescript,提供了完整的…...
2024中国大学生算法设计超级联赛(1)
🚀欢迎来到本文🚀 🍉个人简介:陈童学哦,彩笔ACMer一枚。 🏀所属专栏:杭电多校集训 本文用于记录回顾总结解题思路便于加深理解。 📢📢📢传送门 A - 循环位移解…...
offer题目51:数组中的逆序对
题目描述:在数组中的两个数字,如果前面一个数字大于后面的数字,则这两个数字组成一个逆序对。输入一个数组,求出这个数组中的逆序对的总数。例如,在数组{7,5,6,4}中,一共存在5个逆序对,分别是(7…...
45、PHP 实现滑动窗口的最大值
题目: PHP 实现滑动窗口的最大值 描述: 给定一个数组和滑动窗口的大小,找出所有滑动窗口里数值的最大值。 例如: 如果输入数组{2,3,4,2,6,2,5,1}及滑动窗口的大小3, 那么一共存在6个滑动窗口, 他们的最大值…...
【计算机视觉】siamfc论文复现实现目标追踪
什么是目标跟踪 使用视频序列第一帧的图像(包括bounding box的位置),来找出目标出现在后序帧位置的一种方法。 什么是孪生网络结构 孪生网络结构其思想是将一个训练样本(已知类别)和一个测试样本(未知类别)输入到两个CNN(这两个CNN往往是权值共享的)中࿰…...
数学建模学习(111):改进遗传算法(引入模拟退火、轮盘赌和网格搜索)求解JSP问题
文章目录 一、车间调度问题1.1目前处理方法1.2简单案例 二、基于改进遗传算法求解车间调度2.1车间调度背景介绍2.2遗传算法介绍2.2.1基本流程2.2.2遗传算法的基本操作和公式2.2.3遗传算法的优势2.2.4遗传算法的不足 2.3讲解本文思路及代码2.4算法执行结果: 三、本文…...
Golang | Leetcode Golang题解之第241题为运算表达式设计优先级
题目: 题解: const addition, subtraction, multiplication -1, -2, -3func diffWaysToCompute(expression string) []int {ops : []int{}for i, n : 0, len(expression); i < n; {if unicode.IsDigit(rune(expression[i])) {x : 0for ; i < n &…...