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

uniapp+vue3+uview来开发我们的项目

news 来源：原创 2025/7/14 21:10:31

前言：

就像我们vue的web的框架element、iview等一样，我们的uni-app开发也有适合的他的框架，除了他本身的扩展组件以外，第三方好用的就是就是uview了。

实现效果：

官网信息：

vue2版本：uview-ui

Image 图片 | uView 2.0 - 全面兼容 nvue 的 uni-app 生态框架 - uni-app UI 框架uView UI，是 uni-app 生态最优秀的 UI 框架，全面的组件和便捷的工具会让您信手拈来，如鱼得水https://uviewui.com/components/image.html

vue3版本：uview-plus

安装unocss | uview-plus - 全面兼容nvue/鸿蒙/uni-app-x的uni-app生态框架 - uni-app UI框架uview-plus，是uni-app生态最优秀的UI框架，全面的组件和便捷的工具会让您信手拈来，如鱼得水https://uiadmin.net/uview-plus/components/unocss.html

具体使用：

vue2：

1、安装

npm install uview-ui@2.0.38

2、main.js中配置

// main.js，注意要在use方法之后执行
import uView from 'uview-ui'
Vue.use(uView)// 如此配置即可
uni.$u.config.unit = 'rpx'// 调用setConfig方法，方法内部会进行对象属性深度合并，可以放心嵌套配置
// 需要在Vue.use(uView)之后执行
uni.$u.setConfig({// 修改$u.config对象的属性config: {// 修改默认单位为rpx，相当于执行 uni.$u.config.unit = 'rpx'unit: 'rpx'},// 修改$u.props对象的属性props: {// 修改radio组件的size参数的默认值，相当于执行 uni.$u.props.radio.size = 30radio: {size: 15}// 其他组件属性配置// ......}
})

3、具体使用，带个u就可以了

<template><view><u-action-sheet :actions="list" :title="title" :show="show"></u-action-sheet><u-button @click="show = true">打开ActionSheet</u-button></view>
</template><script>
export default {data() {return {title:'标题',list: [{name:'选项一',subname:"选项一描述",color:'#ffaa7f',fontSize:'20'},{name: '选项二禁用',disabled:true},{name: '开启load加载', //开启后文字不显示loading:true}],show: false};}
};
</script>

vue3：

1、安装，

注意，这里对sass有很严格的版本要求

npm install uview-plus

sass版本要求

"sass": "1.63.2",
"sass-loader": "10.4.1",

sass安装命令
# 注意：sass-loader 版本需兼容，推荐使用 v10.x

npm install sass sass-loader@10 --save-dev

2、在 `main.js` 或 `main.ts` 中配置

import { createSSRApp } from 'vue'import uviewPlus from 'uview-plus' //uni-app创建的vue3项目的话，加这两句export function createApp() {const app = createSSRApp(App)app.use(uviewPlus) //uni-app创建的vue3项目的话，加这两句return { app }
}

3、App.vue中的style样式中添加

<style lang="scss">@import "uview-plus/index.scss"; //添加这个
</style>

4、uni.scss 文件中添加

@import "uview-plus/theme.scss";

5、配置 easycom 自动引入组件，这个很重要

注意：

因为我们如果之前用过vue2+uview开发会发现，我们的标签都是 u- 的标签，但是我们uview-plus 都是 up- 开头的标签，这里添加是为了让二者指向一直，解决我们部分标签查找不对的问题，比如：我们使用button/popup等标签，他就是指向u-button内容，所以要把两个指向都更改到我们新安装的包

"easycom": {"autoscan": true,"custom": {// uni-ui 规则如下配置"^u-(.*)": "uview-plus/components/u-$1/u-$1.vue","^up-(.*)": "uview-plus/components/u-$1/u-$1.vue"}}

6、（非必须）如果需要ts支持，新建一个 `tsconfig.json文件，添加下面内容就行了`

在 tsconfig.json 中添加类型声明：

{"compilerOptions": {"types": ["uview-plus/global"]}
}

7、使用

如果你也想不用手动引入ref等信息，请点我

<template><up-box height="160px" gap="12px" :bgColors="['#EEFCFF', '#FCF8FF', '#FDF8F2']"><template #left>左</template><template #rightTop>右上</template><template #rightBottom>右下</template></up-box><view><up-select v-model="cateId" label="分类":options="cateList" @select="selectItem"></up-select></view><view><up-calendar :show="show"></up-calendar><up-button @click="show = !show">打开/关闭</up-button></view>
</template><script setup>
//这里根据你的配置来，如果没有自动导入的，就手动加上ref的引入
let show = ref(false)
const cateId = ref('')
const cateList = ref([{id: '1',name: '分类1'},{id: '2',name: '分类2'},{id: '3',name: '分类4'},
])// 方法  
const selectItem = (item) => {  console.log(item);  
};  
</script><style></style>

uniapp+vue3+uview来开发我们的项目

前言： 就像我们vue的web的框架element、iview等一样，我们的uni-app开发也有适合的他的框架，除了他本身的扩展组件以外，第三方好用的就是就是uview了。实现效果： 官网信息： vue2版本：uview-ui …...

编程日记 2025/7/14 21:10:31

MySQL 5.7在CentOS 7.9系统下的安装（上）——以rpm包的形式下载mysql

这里我们主要以CentOS 7.9为例进行介绍，会顺带讲讲Ubuntu的操作方式。目录一、检查自己的机器上是否安装有MySQL： （1）第一步：检查系统中是否有正在运行的MySQL服务： （2） 检查当…...

编程日记 2025/7/14 21:09:02

【图像处理基石】什么是油画感？

在图像处理中，“油画感”通常指图像呈现出类似油画的块状纹理、笔触痕迹或色彩过渡不自然的现象，表现为细节模糊、边缘不锐利、颜色断层或人工纹理明显。这种问题常见于照片处理、视频帧截图或压缩后的图像，本质是画质受损的一种表现。以下是…...

编程日记 2025/6/29 8:48:37

深度学习之优化器【从梯度下降到自适应学习率算法】（pytorch版）

文章目录优化器（Optimizer）二基础优化器1. 梯度下降（Gradient Descent, GD）2. 随机梯度下降（Stochastic Gradient Descent, SGD） 三动量优化算法标准动量优化（Momentum）自适应学习…...

编程日记 2025/6/29 8:41:18

React+Webpack 脚手架、前端组件库搭建

链接: 自己写的开发文档，希望大家多多批评...

编程日记 2025/6/29 8:29:29

基于 Python 和 OpenAI 接口规范的本地多轮对话

在自然语言处理的应用中，多轮对话系统是一种极具实用性的功能，无论是聊天机器人、客服系统还是智能助手，都离不开对上下文的持续理解和响应。随着 Ollama 等轻量级模型服务的流行，我们也可以在本地轻松部署语言模型，并…...

编程日记 2025/7/14 14:38:50

binlog日志以及MySQL的数据同步

binlog binlog是什么记录所有数据库表结构，表数据的修改，但是不会记录Select和Show这类操作 binlog有几种记录模式三种记录模式 statement: 基于SQL语句的复制 row: 基于行的复制，记录每行数据的变更（保证了数据的一致性&a…...

编程日记 2025/6/29 8:32:32

串口模块详细讲解

目录 1.串口介绍 2。STC-ISP串口功能介绍 3.接口及引脚定义 4.串口知识点 4.1 硬件电路 4.2 电平标准 4.3 相关术语 4.4 常见通信接口比较 4.5 51单片机的UART 4.6 串口参数及时序图 4.7 串口模式图 4.8 串口和中断系统 4.9 串口相关寄存器 5.串口向电脑发送信息…...

编程日记 2025/7/14 21:07:12

Flannel UDP 模式的优缺点

UDP 模式的特点、优缺点优点高兼容性：通过用户态 UDP 封装，无需内核支持 VXLAN 或其他高级网络功能，适用于旧版 Linux 内核或非标准环境。部署灵活：无需特殊内核模块或硬件支持，易于在异构环境中部署。简单实现&am…...

编程日记 2025/6/29 8:31:59

前端——布局方式

普通流（标准流） 所谓的标准流: 就是标签按照规定好默认方式排列. 1. 块级元素会独占一行，从上向下顺序排列。 常用元素：div、hr、p、h1~h6、ul、ol、dl、form、table 2. 行内元素会按照顺序，从左到右顺序排列&am…...

编程日记 2025/7/14 21:09:03

山东大学软件学院计算机图形学2025期末考题回忆版

任课教师：周元峰老师考试时间：2025年5月13日这次考试比之前的往年题多了写和读OpenGL代码的题目，其它和能找到的往年题（19、21、24）的差别不大。写完回忆题又发现自已错了好几个原题。。。。。。。。。。。。。。。…...

编程日记 2025/6/29 8:26:40

数控滑台：革新传统加工方式的利器

数控技术作为当今制造业中的重要发展方向，已深入到了各个领域，其中数控滑台作为数控加工领域的一个重要组成部分，对于提高加工效率、精度和质量具有重要意义。本文将重点探讨数控滑台的原理、优势以及在工业制造领域的应用。一、数控滑台的…...

编程日记 2025/6/29 1:34:12

【WIN】笔记本电脑忘记密码解决办法/笔记本电脑重装系统笔记/bitlocker忘记密码的解决办法

通过安全模式下的CMD命令找回具体的步骤就是： 首先通过笔记本的对应的一个进入安全模式的一个方式进入安全模式之后，一直点着这个诊断，然后高级选项进去就可以看到了。但是这种方法应该是属于安全漏洞，所以只适合老版本。如果是…...

编程日记 2025/6/29 8:49:21

手机相册的 “智能分类” 功能

我们以手机相册的 “智能分类” 功能（识别图片中的物体类型）为例，演示如何使用 TensorFlow Lite 框架将端侧模型部署到 Android 设备上。该场景通用且覆盖端侧部署的核心步骤：模型准备→环境配置→代码集成→硬件加速→业务调用。…...

编程日记 2025/6/29 8:37:51

配置Hadoop集群-上传文件

（一）上传小文件上传文件的时候，我们传一个大一点的（>128M），再传一个小一点的。对于大一点的文件，我们要去看看它是否会按128M为单位去拆分这个大文件，而拆分成大文件之后&#x…...

编程日记 2025/6/29 8:44:52

SpringBoot整合MQTT实战：基于EMQX实现双向设备通信（附源码）

简言： 在万物互联的时代，MQTT协议凭借其轻量级、高效率的特性，已成为物联网通信的事实标准。本教程将带领您在Ubuntu系统上搭建EMQX 5.9.0消息服务器，并使用Spring Boot快速实现两个客户端的高效通信。通过本指南，您将…...

编程日记 2025/7/14 21:09:46

windows c++ (9) 程序内注册服务并修改登录账户

实现方式全以批处理文件实现，直接在进程内调用即可 1、注册服务注册服务manage.bat内容如下 echo off setlocalset ServiceExeYouProcess.exe set ServiceNameYouProcess set BASE%~dp0:: 检查命令行参数 if "%~1""" (echo Usage: manage_p…...

编程日记 2025/7/14 21:07:13

按键精灵ios脚本新增元素功能助力辅助工具开发（三）

元素节点功能（iOSElement） 在按键精灵 iOS 新版 APP v2.2.0 中，新增了元素节点功能 iOSElement，该功能包含共 15 个函数。这一功能的出现，为开发者在处理 iOS 应用界面元素时提供了更为精准和高效的方式。通过这些函…...

编程日记 2025/7/14 21:02:57

OpenHarmony平台驱动开发（十五），SDIO

OpenHarmony平台驱动开发（十五） SDIO 概述功能简介 SDIO（Secure Digital Input and Output）由SD卡发展而来，与SD卡统称为MMC（MultiMediaCard），二者使用相同的通信协议。SDIO接口…...

编程日记 2025/6/29 8:52:10

ICMP协议详解及不同VLAN/VXLAN主机通信中的ICMP示例

一、ICMP协议概述 ICMP（Internet Control Message Protocol，互联网控制消息协议）是TCP/IP协议栈中的一项核心协议，用于在IP网络中传输控制消息和错误报告。ICMP定义在RFC 792中，主要用于诊断网络问题和传递控制信息。…...

编程日记 2025/7/10 20:39:33

SQL server数据库实现远程跨服务器定时同步传输数据

项目背景数据需要定期迁移，数据存在于客户政务外网下，从旧数据库迁移到新数据库中，且要求能够定时增量同步。注意： 源数据库所在服务器为windows服务器，目标数据库所在服务器为linux服务器。源数据库所在windows服…...

编程日记 2025/6/29 8:49:43

贝叶斯优化Transformer融合支持向量机多变量时间序列预测，Matlab实现

贝叶斯优化Transformer融合支持向量机多变量时间序列预测，Matlab实现目录贝叶斯优化Transformer融合支持向量机多变量时间序列预测，Matlab实现效果一览基本介绍程序设计参考资料效果一览基本介绍 1.BO-TransformerSVM多变量时间序列预测&#xff0c…...

编程日记 2025/6/29 5:07:37

服务器租用与托管注意事项有哪些

在当今数字化的时代，服务器对于企业和个人的重要性不言而喻。无论是搭建网站、运行应用程序，还是存储数据，服务器都是关键的基础设施。而服务器租用与托管作为常见的选择方式，其中的注意事项你可不能马虎。企业在进行租用或者是…...

编程日记 2025/6/29 8:44:35

【PostgreSQL数据分析实战：从数据清洗到可视化全流程】金融风控分析案例-10.3 风险指标可视化监控

👉 点击关注不迷路 👉 点击关注不迷路 👉 点击关注不迷路文章大纲 PostgreSQL金融风控分析之风险指标可视化监控实战一、引言二、案例背景三、数据准备（一）数据来源与字段说明（二）数据清洗四、…...

编程日记 2025/6/29 8:25:06

【AI提示词】贝叶斯分析专家

提示说明一名专业的贝叶斯推断专家，具备统计建模、数据分析和不确定性决策方面的专长。提示词 # Role: 贝叶斯分析专家## Profile - language: 中文 - description: 一名专业的贝叶斯推断专家，具备统计建模、数据分析和不确定性决策方面的专长 - ba…...

编程日记 2025/6/29 8:34:04

星云智控自定义物联网实时监控模板-为何成为痛点？物联网设备的多样化-优雅草卓伊凡

星云智控自定义物联网实时监控模板-为何成为痛点？物联网设备的多样化-优雅草卓伊凡引言：物联网监控的模板革命在万物互联的时代，设备监控已成为保障物联网系统稳定运行的核心环节。传统的标准化监控方案正面临着设备类型爆炸式增长带来的…...

编程日记 2025/7/7 19:28:02

#跟着若城学鸿蒙#HarmonyOS NEXT学习之Blank组件详解

一、组件介绍 Blank（空白）组件是HarmonyOS NEXT中一个简单但非常实用的UI组件，它主要用于在布局中创建空白区域，帮助开发者更灵活地控制界面元素之间的间距和布局结构。虽然Blank组件本身不显示任何内容，但它在界面设…...

编程日记 2025/6/29 8:40:00

《Docker 入门与进阶：架构剖析、隔离原理及安装实操》

1 docker 简介 1.1 Docker 的优点 Docker 是一款开放平台，用于应用程序的开发、交付与运行，能将应用和基础架构分离，实现软件快速交付 ，还能以统一方式管理应用和基础架构，缩短代码从编写到上线的时间。其核心优势如…...

编程日记 2025/6/29 8:41:05

OpenHarmony 开源鸿蒙南向开发——linux下使用make交叉编译第三方库——mqtt库

准备工作请依照这篇文章搭建环境 OpenHarmony 开源鸿蒙南向开发——linux下使用make交叉编译第三方库——环境配置_openharmony交叉编译-CSDN博客下载 wget ftp://ftp.gnutls.org/gcrypt/gnutls/v3.5/gnutls-3.5.9.tar.xz 解压 tar -xf mkdir ./out cd ./out Cmake命…...

编程日记 2025/6/29 8:31:09

【LeetCode 热题 100】二叉树的最大深度 / 翻转二叉树 / 二叉树的直径 / 验证二叉搜索树

⭐️个人主页：小羊 ⭐️所属专栏：LeetCode 热题 100 很荣幸您能阅读我的文章，诚请评论指点，欢迎欢迎 ~ 目录二叉树的中序遍历二叉树的最大深度翻转二叉树对称二叉树二叉树的直径二叉树的层序遍历将有序数组转换为二叉搜索树验…...

编程日记 2025/6/29 8:31:04

中国版 Cursor---腾讯云 CodeBuddy | 从安装VSCode到数独小游戏问世

中国版 Cursor---腾讯云 CodeBuddy | 从安装VSCode到数独小游戏问世引言CodeBuddy环境准备VSCodeCodeBuddyNode.js下载安装游戏开发Craft模型一句话生成数独游戏游戏体验 EdgeOne PagesMCPPages MCP Server配置 MCP Server 游戏源码总结引言在正文开始之前，先引…...

编程日记 2025/7/14 10:17:35

【蓝桥杯嵌入式】【复盘】第13届国赛真题

1. 前言最近在准备16届的蓝桥杯嵌入式赛道的国赛，打算出一个系列的博客，记录STM32G431RBT6这块比赛用板上所有模块可能涉及到的所有考点，如果有错误或者遗漏欢迎各位大佬斧正。本系列博客会分为以下两大类： 1.1. 单独模块的讲…...

编程日记 2025/7/13 22:41:05

Docker疑难杂症解决指南

Docker疑难杂症解决指南 Docker作为容器化技术的代表，广泛应用于开发、测试和部署环境中。然而，在使用过程中，用户可能会遇到各种问题。以下是一些常见的Docker疑难杂症及其解决方法。容器无法启动容器无法启动是常见问题之一&#xff0…...

编程日记 2025/6/29 1:34:19

嵌入式开发学习日志（数据结构--顺序结构单链表）Day19

一、顺序结构安装软件命令： sudo apt-get install (软件名) 安装格式化对齐：sudo apt-get install clang-format 内存泄漏检测工具： sudo apt-get install valgrind 编译后，使用命令 valgrind ./a.out 即可看内…...

编程日记 2025/6/29 3:06:53

题目005 Choose two. Which two actions can obtain information about deadlocks? □ A) Run the SHOW ENGINE INNODB MUTEX command from the mysql client. □ B) Enable the innodb_status_output_locks global parameter. □ C) Enable the innodb_print_all_deadlock…...

编程日记 2025/7/5 3:40:55