【esp32-uniapp】uniapp小程序篇02——引入组件库

news2025/3/7 0:12:08

一、引入组件库(可自行选择其他组件库)

接下来介绍colorUI、uview plus的安装,其他的安装可自行查找教程

1.colorUI

weilanwl/coloruicss: 鲜亮的高饱和色彩,专注视觉的小程序组件库

下载之后解压,将\coloruicss-master\Colorui-UniApp下的colorui复制到项目的根目录、

在App.vue引入

@import "colorui/main.css";
@import "colorui/icon.css";

随便用一个,显示成功。

2.uview plus

因为我创的项目是vue3的,所以安装的是uview plus(不兼容vue2)。如果是vue2的项目,对应的是uview.

官方安装教程:安装 | uview-plus - 全面兼容nvue/鸿蒙/uni-app-x的uni-app生态框架 - uni-app UI框架

接下来是Hbuider X方式的安装步骤

(1)下载插件

点击下面的连接去下载插件

零云®uview-plus3.0重磅发布,全面的Vue3鸿蒙移动组件库。 - DCloud 插件市场

点击完之后,需要扫码看广告,跟着看一下就好。

看完之后会有一个弹窗询问是否要打开Hbuider,选择  打开。

然后选择你要导入的项目。

完成之后会发现目录多了一个这个文件夹

(2)引入uview-plus主JS库

在项目根目录中的main.js中,引入并使用uview-plus的JS库。

代码:

import uviewPlus from '@/uni_modules/uview-plus'
 app.use(uviewPlus)
(3)引入uview-plus的全局SCSS主题文件

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

注意!

请注意uni-app官方规范中uni.scss是一个特殊文件,万万不可将其它样式比如uview-plus/index.scss引入至uni.scss中,否则会造成打包后包超大。

/* uni.scss */
@import '@/uni_modules/uview-plus/theme.scss';
(4) 引入uview-plus基础样式

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

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

(5)安装依赖库
npm i dayjs
npm i clipboard
(6)配置easycom组件模式

温馨提示

  1. uni-app为了调试性能的原因,修改easycom规则不会实时生效,配置完后,您需要重启HX或者重新编译项目才能正常使用uview-plus的功能。
  2. 请确保您的pages.json中只有一个easycom字段,否则请自行合并多个引入规则。


	"easycom": {
		"autoscan": true,
		// 注意一定要放在custom里,否则无效,https://ask.dcloud.net.cn/question/131175
		"custom": {
			"^u--(.*)": "@/uni_modules/uview-plus/components/u-$1/u-$1.vue",
			"^up-(.*)": "@/uni_modules/uview-plus/components/u-$1/u-$1.vue",
	    "^u-([^-].*)": "@/uni_modules/uview-plus/components/u-$1/u-$1.vue"
		}
	},
	

二、测试

在index.vue页面随便引用一些组件-->运行

<template>
	
	<view style="padding: 40px;">
			<up-button text="渐变色按钮" color="linear-gradient(to right, rgb(66, 83, 216), rgb(213, 51, 186))"></up-button>
		</view>

</template>

<script setup>
	import { ref } from 'vue';
	
	const disabled = ref(true);
</script>

<style>
	
</style>

显示成功。配置结束

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

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

相关文章

【机器学习】自定义数据集,使用scikit-learn 中K均值包 进行聚类

一、K 均值算法简介 K 均值算法的目标是将数据集划分为 K 个簇&#xff0c;使得每个数据点属于离它最近的簇中心&#xff08;centroid&#xff09;所代表的簇。 K均值聚类算法步骤 ① 初始化&#xff1a; 随机选择原始数据的K个数据点作为初始质心&#xff08;聚类中心&…

进阶数据结构——高精度运算

目录 前言一、高精度运算的定义与背景二、高精度运算的实现方式三、高精度运算的算法实现四、高精度运算的应用场景五、代码模版&#xff08;c&#xff09;六、经典例题1.[高精度加法](https://www.lanqiao.cn/problems/1516/learning/?page1&first_category_id1&name…

设计模式Python版 原型模式

文章目录 前言一、原型模式二、原型模式示例三、原型管理器 前言 GOF设计模式分三大类&#xff1a; 创建型模式&#xff1a;关注对象的创建过程&#xff0c;包括单例模式、简单工厂模式、工厂方法模式、抽象工厂模式、原型模式和建造者模式。结构型模式&#xff1a;关注类和对…

用 JavaScript 打造交互式表格:添加与删除行功能

前言 在网页开发中&#xff0c;创建交互式表格是很常见的。今天我们通过一个示例&#xff0c;来展示如何使用 HTML、CSS 和 JavaScript 实现一个能够动态添加和删除行的表格&#xff0c;并详细解释其中 JavaScript 部分的代码逻辑。 功能展示 初始状态&#xff1a;页面加载后…

Linux02——Linux的基本命令

目录 ls 常用选项及功能 综合示例 注意事项 cd和pwd命令 cd命令 pwd命令 相对路径、绝对路径和特殊路径符 特殊路径符号 mkdir命令 1. 功能与基本用法 2. 示例 3. 语法与参数 4. -p选项 touch-cat-more命令 1. touch命令 2. cat命令 3. more命令 cp-mv-rm命…

服务器虚拟化实战:架构、技术与最佳实践

&#x1f4dd;个人主页&#x1f339;&#xff1a;一ge科研小菜鸡-CSDN博客 &#x1f339;&#x1f339;期待您的关注 &#x1f339;&#x1f339; 1. 引言 服务器虚拟化是现代 IT 基础设施的重要组成部分&#xff0c;通过虚拟化技术可以提高服务器资源利用率、降低硬件成本&am…

AI大模型开发原理篇-1:语言模型雏形之N-Gram模型

N-Gram模型概念 N-Gram模型是一种基于统计的语言模型&#xff0c;用于预测文本中某个词语的出现概率。它通过分析一个词语序列中前面N-1个词的出现频率来预测下一个词的出现。具体来说&#xff0c;N-Gram模型通过将文本切分为长度为N的词序列来进行建模。 注意&#xff1a;这…

Python从零构建macOS状态栏应用(仿ollama)并集成AI同款流式聊天 API 服务(含打包为独立应用)

在本教程中,我们将一步步构建一个 macOS 状态栏应用程序,并集成一个 Flask 服务器,提供流式响应的 API 服务。 如果你手中正好持有一台 MacBook Pro,又怀揣着搭建 AI 聊天服务的想法,却不知从何处迈出第一步,那么这篇文章绝对是你的及时雨。 最终,我们将实现以下功能: …

leetcode 2080. 区间内查询数字的频率

题目如下 数据范围 示例 这题十分有意思一开始我想对每个子数组排序二分结果超时了。 转换思路&#xff1a;我们可以提前把每个数字出现的位置先记录下来形成集合&#xff0c; 然后拿着left和right利用二分查找看看left和right是不是在集合里然后做一个相减就出答案了。通过…

深入了解 SSRF 漏洞:原理、条件、危害

目录 前言 SSRF 原理 漏洞产生原因 产生条件 使用协议 使用函数 漏洞影响 防御措施 结语 前言 本文将深入剖析 SSRF&#xff08;服务端请求伪造&#xff09;漏洞&#xff0c;从原理、产生原因、条件、影响&#xff0c;到防御措施&#xff0c;为你全面梳理相关知识&am…

11.QT控件:输入类控件

1. Line Edit(单行输入框) QLineEdit表示单行输入框&#xff0c;用来输入一段文本&#xff0c;但是不能换行。 核心属性&#xff1a; 核心信号&#xff1a; 2. Text Edit(多行输入框) QTextEdit表示多行输入框&#xff0c;也是一个富文本 & markdown编辑器。并且能在内容超…

Cesium+Vue3教程(011):打造数字城市

文章目录 Cesium打造数字城市创建项目加载地球设置底图设置摄像头查看具体位置和方向添加纽约建筑模型并设置样式添加纽约建筑模型设置样式划分城市区域并着色地图标记显示与实现实现飞机巡城完整项目下载Cesium打造数字城市 创建项目 使用vite创建vue3项目: pnpm create v…

Windows系统本地部署deepseek 更改目录

本地部署deepseek 无论是mac还是windows系统本地部署deepseek或者其他模型的命令和步骤是一样的。 可以看: 本地部署deepsek 无论是ollama还是部署LLM时候都默认是系统磁盘&#xff0c;对于Windows系统&#xff0c;我们一般不把应用放到系统盘&#xff08;C:&#xff09;而是…

基于Python的药物相互作用预测模型AI构建与优化(下.代码部分)

四、特征工程 4.1 分子描述符计算 分子描述符作为量化分子性质的关键数值,能够从多维度反映药物分子的结构和化学特征,在药物相互作用预测中起着举足轻重的作用。RDKit 库凭借其强大的功能,为我们提供了丰富的分子描述符计算方法,涵盖了多个重要方面的分子性质。 分子量…

[Python学习日记-79] socket 开发中的粘包现象(解决模拟 SSH 远程执行命令代码中的粘包问题)

[Python学习日记-79] socket 开发中的粘包现象&#xff08;解决模拟 SSH 远程执行命令代码中的粘包问题&#xff09; 简介 粘包问题底层原理分析 粘包问题的解决 简介 在Python学习日记-78我们留下了两个问题&#xff0c;一个是服务器端 send() 中使用加号的问题&#xff0c…

origin如何在已经画好的图上修改数据且不改变原图像的画风和格式

例如我现在的.opju文件长这样 现在我换了数据集&#xff0c;我想修改这两个图表里对应的算法里的数据&#xff0c;但是我还想保留这图像现在的形式&#xff0c;可以尝试像下面这样做&#xff1a; 右击第一个图&#xff0c;出现下面&#xff0c;选择Book[sheet1] 选择工作簿 出…

5.3.2 软件设计原则

文章目录 抽象模块化信息隐蔽与独立性衡量 软件设计原则&#xff1a;抽象、模块化、信息隐蔽。 抽象 抽象是抽出事物本质的共同特性。过程抽象是指将一个明确定义功能的操作当作单个实体看待。数据抽象是对数据的类型、操作、取值范围进行定义&#xff0c;然后通过这些操作对数…

【ArcGIS遇上Python】批量提取多波段影像至单个波段

本案例基于ArcGIS python,将landsat影像的7个波段影像数据,批量提取至单个波段。 相关阅读:【ArcGIS微课1000例】0141:提取多波段影像中的单个波段 文章目录 一、数据准备二、效果比对二、python批处理1. 编写python代码2. 运行代码一、数据准备 实验数据及完整的python位…

Spring Security(maven项目) 3.0.2.9版本 --- 改

前言&#xff1a; 通过实践而发现真理&#xff0c;又通过实践而证实真理和发展真理。从感性认识而能动地发展到理性认识&#xff0c;又从理性认识而能动地指导革命实践&#xff0c;改造主观世界和客观世界。实践、认识、再实践、再认识&#xff0c;这种形式&#xff0c;循环往…

仿真设计|基于51单片机的温度与烟雾报警系统

目录 具体实现功能 设计介绍 51单片机简介 资料内容 仿真实现&#xff08;protues8.7&#xff09; 程序&#xff08;Keil5&#xff09; 全部内容 资料获取 具体实现功能 &#xff08;1&#xff09;LCD1602实时监测及显示温度值和烟雾浓度值&#xff1b; &#xff08;2…