[保姆级教程]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 的开发环境)。

  1. 安装 HBuilderX:如果你还没有安装 HBuilderX,可以到官网下载并安装:HBuilderX 官网。

  2. 创建 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.scssApp.vue 中的样式引入语句是否正确,确保路径和文件名与实际 uView 所在位置一致。

通过以上步骤,你已经成功地将 uView UI 集成到了你的 UniApp 项目中,并可以开始使用其提供的丰富组件和样式来构建界面。

NPM方式

安装和使用 uView UI 在 UniApp 中是相对简单的过程,下面我来为你提供一个基本的教程。

步骤 1: 安装 uView UI

接下来,我们需要在 UniApp 项目中安装 uView UI。

  1. 打开终端

    • 在 HBuilderX 中,点击菜单栏的「工具」->「开发者工具」->「终端」,这样就可以打开终端。
  2. 使用 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>

项目展示效果:
在这里插入图片描述

您好,我是肥晨。
欢迎关注我获取前端学习资源,日常分享技术变革,生存法则;行业内幕,洞察先机。

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

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

相关文章

websocket状态机

websocket突破了HTTP协议单向性的缺陷&#xff0c;基于HTTP协议构建了双向通信的通道&#xff0c;使服务端可以主动推送数据到前端&#xff0c;解决了前端不断轮询后台才能获取后端数据的问题&#xff0c;所以在小程序和H5应用中被广泛使用。本文主要集合报文分析对于websocket…

MATLAB绘制正弦波、余弦波、方波、三角波

一、引言 MATLAB是一种具有很强的数值计算和数据可视化软件&#xff0c;提供了许多内置函数来简化数学运算和图形的快速生成。在MATLAB中&#xff0c;你可以使用多种方法来快速绘制正弦波、方波和三角波。以下是一些基本的示例&#xff0c;展示了如何使用MATLAB的命令来实现正弦…

基于dcm4chee搭建的PACS系统讲解(一)docker搭建精简版

文章目录 知识点PACSdcm4chedcm4chee部署dcm4chee方式 docker部署docker编排 总结 最近项目开始需要用到PACS系统&#xff0c;于是研究了一番&#xff0c;选用了dcm4chee搭建PACS系统&#xff0c;抛出 dcm-arc-light的git地址 。 知识点 PACS Picture Archiving and Communic…

【详细的springboot自动装载原理】

1.默认提供的核心配置模块 springboot提供了 spring-boot-autoconfigure模块&#xff0c;该模块为springboot自动配置的核心模块&#xff0c;它初始化好了很多我们平时需要的配置类&#xff0c;那么有了这些配置类就能生效了吗&#xff1f;得需要一个东西在启动的时候去把它加…

uniapp 小程序 嵌套 webview 返回需要点击两次

uniapp 小程序 嵌套 webview 返回需要点击两次 先 上图 小程序也监听不到 返回事件在网上找了一圈 都没有理想的答案&#xff0c;猜测 是因为嵌入的页面中有问题果然 小程序中嵌入的代码 <view><web-view :src"urlSrc" ></web-view></view>…

jdk1.8 List集合Stream流式处理

jdk1.8 List集合Stream流式处理 一、介绍(为什么需要流Stream&#xff0c;能解决什么问题&#xff1f;)1.1 什么是 Stream&#xff1f;1.2 常见的创建Stream方法1.3 常见的中间操作1.4 常见的终端操作 二、创建流Stream2.1 Collection的.stream()方法2.2 数组创建流2.3 静态工厂…

理解进程status的二进制位表示及进程等待(是什么,为什么,怎么办)

信号编号&#xff1a;低7位 状态编号&#xff1a;次低8位 1.子进程退出后会变为僵尸进程&#xff0c;将退出结果写入自身的task_struct结构体中 2.wait/waitpid是一个系统调用->OS可以读取子进程的task_struct 1.为什么要进行进程等待&#xff1f; 1.将子进程&#xff…

C语言 | Leetcode C语言题解之第241题为运算表达式设计优先级

题目&#xff1a; 题解&#xff1a; #define ADDITION -1 #define SUBTRACTION -2 #define MULTIPLICATION -3int* diffWaysToCompute(char * expression, int* returnSize) {int len strlen(expression);int *ops (int *)malloc(sizeof(int) * len);int opsSize 0;for (in…

单周期CPU(三)译码模块(minisys)(verilog)(vivado)

timescale 1ns / 1ps //module Idecode32 (input reset,input clock,output [31:0] read_data_1, // 输出的第一操作数output [31:0] read_data_2, // 输出的第二操作数input [31:0] Instruction, // 取指单元来的指令input [31:0] …

前台文本直接取数据库值doFieldSQL插入SQL

实现功能&#xff1a;根据选择的车间主任带出角色。 实现步骤&#xff1a;OA的“字段联动”功能下拉选项带不出表“hrmrolemembers”&#xff0c;所以采用此方法。 doFieldSQL("select roleid from HrmResource as a inner join hrmrolemembers as b on a.id b.resource…

快速排序【示例】

冒泡排序可以说是我们学习的第一个真正的排序算法&#xff0c;并且解决了桶排序浪费 空间的问题&#xff0c;但在算法的执行效率上却牺牲了很多&#xff0c;它的时间复杂度达到了 O(N^2)。假如我 们的计算机每秒钟可以运行 10 亿次&#xff0c;那么对 1 亿个数进行排序&#xf…

【京存】助力《抓娃娃》后期制作!

沈腾马丽合体爆改偷感夫妇&#xff0c;暑期开大贴脸开笑!!西虹市IP爆笑回归!! 困苦的爹&#xff0c;辛劳的妈&#xff0c;破烂的院子&#xff0c;破碎的他。西虹市做大做强的路上怎么把老马家落下了?!!! “汤里没油&#xff0c;兜里没子”的马成钢(沈腾 饰)和春兰(马丽 饰)&…

收银系统源码-线上商城diy装修

线下线上一体化收银系统越来越受门店重视&#xff0c;尤其是连锁多门店&#xff0c;想通过线下线上相互带动&#xff0c;相互引流&#xff0c;提升门店营业额。商城商城如何装修呢&#xff1f; 1.收银系统开发语言 核心开发语言: PHP、HTML5、Dart后台接口: PHP7.3后合管理网…

使用Django Rest Framework构建API

Django Rest Framework (DRF) 是一个强大且灵活的工具集&#xff0c;用以构建Web API。它基于Django&#xff0c;一个非常流行的Python Web框架。在本文中&#xff0c;我们将深入探讨如何使用DRF来构建一个高效、结构化的API。 目录 使用Django Rest Framework构建API 一、环…

【SQLServer】如何设计日增几十万数据量的业务分库分表方案

随着公司的业务发展不断的壮大&#xff0c;像一些核心的业务&#xff08;如订单&#xff09;数据量会越来越大&#xff0c;此时就需要考虑分库分表方案来应对业务的发展。今天就来聊聊分库分表的一些设计方案。 1、冷热数据分离方案 在我们业务中有些数据只是最近一段时间使用…

世平基于 NXP UWB Digital-Key Kit 应用方案

大联大世平集团针对汽车数字钥匙&#xff0c;推出了基于 NXP UWB Digital-Key Kit 解决方案。此方案基于超宽带&#xff08;UWB&#xff09;技术&#xff0c;利用 UWB 技术的高精度定位和距离测量能力&#xff0c;实现了安全、便捷的数字钥匙功能。该套件主要器件有 NXP 的 UWB…

14、如何⽤DDD设计微服务代码模型

在完成领域模型设计后&#xff0c;接下来我们就可以开始微服务的设计和 落地了。在微服务落地前&#xff0c;⾸先要确定微服务的代码结构&#xff0c;也就是我 下⾯要讲的微服务代码模型。 只有建⽴了标准的微服务代码模型和代码规范后&#xff0c;我们才可以将 领域对象映射到…

AgentMD:通过大规模临床工具学习提升语言代理的风险预测能力

人工智能咨询培训老师叶梓 转载标明出处 临床计算器在医疗保健中扮演着至关重要的角色&#xff0c;它们通过提供准确的基于证据的预测来辅助临床医生进行诊断和预后评估。然而&#xff0c;由于可用性挑战、传播不畅和功能受限&#xff0c;这些工具的广泛应用常常受限。为了克服…

Django视图与URLs路由详解

在Django Web框架中&#xff0c;视图&#xff08;Views&#xff09;和URLs路由&#xff08;URL routing&#xff09;是Web应用开发的核心概念。它们共同负责将用户的请求映射到相应的Python函数&#xff0c;并返回适当的响应。本篇博客将深入探讨Django的视图和URLs路由系统&am…

【北京迅为】《i.MX8MM嵌入式Linux开发指南》-第三篇 嵌入式Linux驱动开发篇-第四十八章 Platform 设备驱动

i.MX8MM处理器采用了先进的14LPCFinFET工艺&#xff0c;提供更快的速度和更高的电源效率;四核Cortex-A53&#xff0c;单核Cortex-M4&#xff0c;多达五个内核 &#xff0c;主频高达1.8GHz&#xff0c;2G DDR4内存、8G EMMC存储。千兆工业级以太网、MIPI-DSI、USB HOST、WIFI/BT…