当前位置: 首页 > news >正文

uniapp 中引入使用uView UI

文章目录

  • 一、前言:选择 uView UI的原因
  • 二、完整引入步骤
    • 1. 安装 uView UI
    • 2. 配置全局样式变量(关键!)
    • 3. 在 pages.json中添加:
    • 4. 全局注册组件
    • 5. 直接使用组件
  • 五、自定义主题色(秒换皮肤)

一、前言:选择 uView UI的原因

uView UI 是 uni-app 生态中高颜值、高拓展性、开发体验友好的组件库,提供 100+ 组件和丰富工具,能极大提升开发效率。


二、完整引入步骤

1. 安装 uView UI

在项目根目录执行命令(确保已安装 Node.js):

npm install uview-ui

验证安装成功
查看项目根目录是否生成 uview-ui 文件夹,结构如下:

uview-ui/├── components/   # 所有组件源码├── libs/         # 工具库(如请求封装)├── theme.scss    # 核心样式变量文件└── index.scss    # 全量样式文件(慎用!)

2. 配置全局样式变量(关键!)

uni.scss 文件中引入主题文件(支持自定义主题色、间距等):

/** uni.scss */
@import '@/uview-ui/theme.scss';  // 核心样式依赖此文件

为什么必须做这一步?

  • uView 的组件样式依赖 theme.scss 中的变量定义
  • 后续自定义主题色、字体大小等都通过修改此文件实现

3. 在 pages.json中添加:

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

4. 全局注册组件

main.js 中添加以下代码:

// main.js
import uView from 'uview-ui';
Vue.use(uView);  // 全局注册所有组件

5. 直接使用组件

在任意页面中无需导入,直接使用:

<template><view class="container"><u-button type="primary" text="提交"></u-button><u-icon name="home" size="24"></u-icon></view>
</template>
<!-- 无需 script 导入! -->

五、自定义主题色(秒换皮肤)

uni.scss 中覆盖默认变量:

/** uni.scss自定义主题色(必须放在引入 theme.scss 之前!) **/
$u-primary: #FF0000;    // 主题红
$u-warning: #FF9900;    // 警告橙@import '@/uview-ui/theme.scss';

修改后重启项目即可生效!


组件未找到?

  • 检查1:确认 uview-ui 文件夹在项目根目录
  • 检查2:若使用 easycom,路径必须为 @/uview-ui/...
  • 检查3:删除 node_modules 后重新安装依赖

相关文章:

uniapp 中引入使用uView UI

文章目录 一、前言&#xff1a;选择 uView UI的原因二、完整引入步骤1. 安装 uView UI2. 配置全局样式变量&#xff08;关键&#xff01;&#xff09;3. 在 pages.json中添加&#xff1a;4. 全局注册组件5. 直接使用组件 五、自定义主题色&#xff08;秒换皮肤&#xff09; 一、…...

用冒泡排序法模拟qsort函数

目录 1.前言 2.qsort函数的介绍 ​3.冒泡法回顾 4.模拟qsort---buble_sort 4.1 buble_sort格式 4.2 主函数&#xff0c;以int类型为例 4.3comp_int函数的功能设计 4.4 swap函数的功能设计 5. 总代码概览 1.前言 今天&#xff0c;小邓儿带大家用冒泡排序法来模拟一下qs…...

DCN讲解

DCN是DeepFM的升级版&#xff0c;后者是只能做二阶交叉特征&#xff0c;随着阶数上升&#xff0c;模型复杂度大幅提高&#xff0c;且FM网络层较浅&#xff0c;表达能力有限。google团队通过构建深度交叉网络来自动进行特征的高阶交叉&#xff0c;且时空复杂度均为线性增长&…...

nginx的作用和应用场景

Nginx 是一款高性能的开源 Web 服务器和反向代理服务器&#xff0c;以其高效处理高并发连接和低资源消耗著称。以下是其核心作用及典型应用场景的详细解析&#xff1a; 一、Nginx 的核心作用 1. 静态资源服务器 功能&#xff1a;直接托管 HTML、CSS、JavaScript、图片等静态文…...

[Lc滑动窗口_1] 长度最小的数组 | 无重复字符的最长子串 | 最大连续1的个数 III | 将 x 减到 0 的最小操作数

目录 1. 长度最小的字数组 题解 代码 ⭕2.无重复字符的最长子串 题解 代码 3.最大连续1的个数 III 题解 代码 4.将 x 减到 0 的最小操作数 题解 代码 1. 长度最小的字数组 题目链接&#xff1a;209.长度最小的字数组 题目分析: 给定一个含有 n 个 正整数 的数组…...

基于python的网络爬虫爬取天气数据及可视化分析(Matplotlib、sk-learn等,包括ppt,视频)

基于Python爬取天气数据信息与可视化分析&#xff08;文末完整源码&#xff09; 基于python的网络爬虫爬取天气数据及可视化分析 可以看看演示视频。 摘要 基于Python爬取天气数据信息与可视化分析 本论文旨在利用Python编程语言实现天气数据信息的爬取和可视化分析。天气…...

【缓存】缓存雪崩与缓存穿透:高并发系统的隐形杀手

缓存雪崩与缓存穿透&#xff1a;高并发系统的隐形杀手 在高并发系统中&#xff0c;缓存是提升性能的重要手段。然而&#xff0c;缓存使用不当也会带来一系列问题&#xff0c;其中最常见的就是缓存雪崩和缓存穿透。这两个问题如果不加以解决&#xff0c;可能会导致系统崩溃&…...

HTML AI 编程助手

HTML AI 编程助手 引言 随着人工智能技术的飞速发展&#xff0c;编程领域也迎来了新的变革。HTML&#xff0c;作为网页制作的基础语言&#xff0c;与AI技术的结合&#xff0c;为开发者带来了前所未有的便利。本文将探讨HTML AI编程助手的功能、应用场景以及如何利用它提高编程…...

李宏毅机器学习课程学习笔记04 | 浅谈机器学习-宝可梦、数码宝贝分类器

文章目录 案例&#xff1a;宝可梦、数码宝贝分类器第一步&#xff1a;需要定义一个含有未知数的function第二步&#xff1a;loss of a function如何Sample Training Examples > 如何抽样可以得到一个较好的结果如何权衡模型的复杂程度 Tradeoff of Model Complexity todo 这…...

AIGC(生成式AI)试用 26 -- 跟着清华教程学习 - DeepSeek与AI幻觉

目标&#xff1a;继续学习 个人理解&#xff1a; - AI幻觉&#xff1a;一本正经的胡说八道&#xff0c;你还觉得很道理&#xff0c;倾向于相信&#xff1b;事实不一致&#xff0c;指令(预期)与实际不一致&#xff1a;跑题 - 潜在风险&#xff1a;把AI带坏了&#xff1b;信息误…...

Ubuntu 下 nginx-1.24.0 源码分析 - ngx_conf_add_dump

ngx_conf_add_dump 定义在src\core\ngx_conf_file.c static ngx_int_t ngx_conf_add_dump(ngx_conf_t *cf, ngx_str_t *filename) {off_t size;u_char *p;uint32_t hash;ngx_buf_t *buf;ngx_str_node_t *sn;ngx_conf_dump_t *cd;has…...

QEMU源码全解析 —— 内存虚拟化(23)

接前一篇文章:QEMU源码全解析 —— 内存虚拟化(22) 本文内容参考: 《趣谈Linux操作系统》 —— 刘超,极客时间 《QEMU/KVM源码解析与应用》 —— 李强,机械工业出版社 QEMU内存管理模型...

【北京迅为】itop-3568 开发板openharmony鸿蒙烧写及测试-第1章 体验OpenHarmony—烧写镜像

瑞芯微RK3568芯片是一款定位中高端的通用型SOC&#xff0c;采用22nm制程工艺&#xff0c;搭载一颗四核Cortex-A55处理器和Mali G52 2EE 图形处理器。RK3568 支持4K 解码和 1080P 编码&#xff0c;支持SATA/PCIE/USB3.0 外围接口。RK3568内置独立NPU&#xff0c;可用于轻量级人工…...

TypeScript 类型声明

在 TypeScript 开发中简化类型声明&#xff0c;可以通过以下 7 种实用技巧 显著提升效率&#xff1a; 一、善用类型推断&#xff08;30% 场景免声明&#xff09; // ❌ 冗余写法 const user: { name: string; age: number } { name: Jack, age: 25 };// ✅ 自动推断&#xff…...

从0搭建Tomcat第二天:深入理解Servlet容器与反射机制

在上一篇博客中&#xff0c;我们从0开始搭建了一个简易的Tomcat服务器&#xff0c;并实现了基本的HTTP请求处理。今天&#xff0c;我们将继续深入探讨Tomcat的核心组件之一——Servlet容器&#xff0c;并介绍如何使用反射机制动态加载和管理Servlet。 1. Servlet容器的作用 S…...

【Python】yield函数

【Python】yield函数 1. yield介绍2.yield基本用法3.yield高级用法3.1 yield send() 方法3.2 yield from方法3.3 yield 和yield from叠加处理复杂情况下的叠加 4.yield主要应用场景5.总结 python官方api地址 1. yield介绍 在Python中&#xff0c;yield关键字主要用于生成器函…...

Android13修改多媒体默认音量

干就完了! 设置音量为最大音量,修改如下: /framework/base/media/java/android/media/AudioSystem.java/** hide */public static int[] DEFAULT_STREAM_VOLUME new int[] {4, // STREAM_VOICE_CALL7, // STREAM_SYSTEM5, // STREAM_RING-5, // STREAM_MUSIC15, // STREAM…...

nginx+keepalived负载均衡及高可用

一、环境准备 主机名ip地址备注openEuler-1 192.168.121.11&#xff08;本机&#xff09; 192.168.131.11&#xff08;心跳连接&#xff09; nginx主负载均衡调度器openEuler-2 192.168.121.12&#xff08;本机&#xff09; 192.168.131.12&#xff08;心跳连接&#xff09; n…...

SP导入智能材质球

智能材质球路径 ...\Adobe Substance 3D Painter\resources\starter_assets\smart-materials 放入之后就会自动刷新...

Kotlin语言特性(一):空安全、扩展函数与协程

Kotlin语言特性&#xff08;一&#xff09;&#xff1a;空安全、扩展函数与协程 一、引言 Kotlin作为Android官方推荐的开发语言&#xff0c;相比Java具有诸多现代化特性。本文将重点介绍Kotlin三个最具特色的语言特性&#xff1a;空安全、扩展函数和协程&#xff0c;并结合A…...

three.ar.js 终极入门指南:10分钟快速上手 WebAR 开发

three.ar.js 终极入门指南&#xff1a;10分钟快速上手 WebAR 开发 【免费下载链接】three.ar.js A helper three.js library for building AR web experiences that run in WebARonARKit and WebARonARCore 项目地址: https://gitcode.com/gh_mirrors/th/three.ar.js th…...

OpenClaw镜像体验:在星图GPU平台快速试用SecGPT-14B安全分析

OpenClaw镜像体验&#xff1a;在星图GPU平台快速试用SecGPT-14B安全分析 1. 为什么选择云平台体验OpenClaw 第一次接触OpenClaw时&#xff0c;我被它的自动化能力吸引&#xff0c;但本地安装过程让我望而却步。作为一个经常需要评估各种AI工具的安全工程师&#xff0c;我发现…...

Tomato-Novel-Downloader:高性能小说下载工具的技术实践与应用指南

Tomato-Novel-Downloader&#xff1a;高性能小说下载工具的技术实践与应用指南 【免费下载链接】Tomato-Novel-Downloader 番茄小说下载器不精简版 项目地址: https://gitcode.com/gh_mirrors/to/Tomato-Novel-Downloader 1 核心价值&#xff1a;重新定义小说下载体验 …...

新手零失败指南:在快马平台跟做交互式openclaw安装教程

最近在折腾一个叫openclaw的工具&#xff0c;作为新手被各种依赖和报错折磨得够呛。后来发现用InsCode(快马)平台可以把这个过程变成交互式教程&#xff0c;特别适合像我这样刚入门的小白。这里把踩坑经验整理成笔记&#xff0c;手把手带你零失败完成安装。 为什么选择交互式安…...

Meshroom终极指南:从照片到3D模型的免费开源解决方案

Meshroom终极指南&#xff1a;从照片到3D模型的免费开源解决方案 【免费下载链接】Meshroom Node-based Visual Programming Toolbox 项目地址: https://gitcode.com/gh_mirrors/me/Meshroom Meshroom是一款革命性的开源3D重建软件&#xff0c;能够将普通照片自动转换为…...

【Epic认证级适配流程】:UE6.5.0–6.5.3全版本C++27支持矩阵,含3大禁用扩展、2个ABI断裂风险点与1份可审计迁移Checklist

第一章&#xff1a;Epic认证级C27适配的合规性基准与目标定义Epic Games官方于2024年Q3发布的《Unreal Engine 5.5 C Language Compliance Framework》首次将C27草案核心特性纳入引擎构建工具链的强制验证范围。本章确立的合规性基准并非仅面向语法兼容&#xff0c;而是聚焦于A…...

OpenClaw学习助手:用gemma-3-12b-it自动整理课程笔记与习题

OpenClaw学习助手&#xff1a;用gemma-3-12b-it自动整理课程笔记与习题 1. 为什么需要AI学习助手&#xff1f; 作为一名经常需要消化大量课程资料的技术从业者&#xff0c;我长期被三个问题困扰&#xff1a;PDF讲义信息碎片化难以形成体系、课堂重点难以快速提炼、错题整理耗…...

OpenClaw+Phi-3-vision-128k-instruct安全方案:敏感数据本地化处理指南

OpenClawPhi-3-vision-128k-instruct安全方案&#xff1a;敏感数据本地化处理指南 1. 为什么需要本地化处理敏感数据&#xff1f; 上周我帮一位做财务咨询的朋友处理季度报表时&#xff0c;他提到一个痛点&#xff1a;每次用云端AI工具分析客户财务数据都提心吊胆。这让我意识…...

如何设计高质量的API接口:终极完整指南与最佳实践

如何设计高质量的API接口&#xff1a;终极完整指南与最佳实践 【免费下载链接】InterviewGuide &#x1f525;&#x1f525;「InterviewGuide」是阿秀从校园->职场多年计算机自学过程的记录以及学弟学妹们计算机校招&秋招经验总结文章的汇总&#xff0c;包括但不限于C/C…...

如何快速定制lightgallery.js画廊样式:SCSS变量终极指南

如何快速定制lightgallery.js画廊样式&#xff1a;SCSS变量终极指南 【免费下载链接】lightgallery.js Full featured JavaScript image & video gallery. No dependencies 项目地址: https://gitcode.com/gh_mirrors/li/lightgallery.js lightgallery.js 是一个功能…...