vite + react + typescript + uni-app + node 开发一个生态系统

简介

  • 使用 vite + react + typescript + uni-app + node 来开发一个简易的生态系统案例,包含 APP,H5,微信小程序,控制台,服务端

开发

admin

  • 技术栈:vite + react + typescript
  • 初始化控制台项目
  • 选择自定义预设,例如: react + npm
npm create mine

mobile

  • 技术栈:vite + uni-app + vue3.x + typescript
  • 初始化移动端项目
  • 包含 APP,H5,微信小程序
  • 选择自定义预设,例如: uni-app + npm
npm create mine

server

  • 技术栈:vite + node + typescript + express + mysql + sequelize
  • 初始化服务端项目
  • 选择自定义预设,例如: node + npm
npm create mine

源码简介

  • 一个简单的生态系统,包含 APP,H5,微信小程序,控制台,服务端 😄
  • 源码地址 ecosystem

项目目录结构

  • admin: vite + react 控制台
  • mobile: vite + uni-app 包含 APP, H5, 微信小程序
  • server: vite + node 服务端,包含控制台和 APP 的接口

演示地址

  • 控制台

  • APP

  • 服务端接口文档

  • 微信小程序: 微信开发者工具本地运行

  • H5

    • 浏览器浏览请开启:Toogle device toolbar
    • 手机浏览请扫描下方二维码

二维码

总结

  • 总体来说都是一些基础的知识,没有什么难度,但是对于新手来说,还是有一定的难度的,需要多多练习,多多思考,多多总结,加油!😄
  • 如何有什么项目上的问题,可以提 issue,我会尽快回复的,希望对你有所帮助

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

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

相关文章

Gitlab仓库部署

Gitlab仓库部署 一、Gitlab的概述1、gitlab介绍2、gitlab主要功能3、gitlab和github的区别 二、部署环境1、安装依赖环境2、安装Postfix邮箱3、Gitlab优势4、Gitlab工作流程 三、Gitlab部署过程1、Yum安装Gitlab2、配置gitlab站点URL3、启动并访问Gitlab 四、Gitlab具体操作1、…

CSS盒子模型

盒子模型的组成 CSS会把所有的HTML元素都看成一个盒子,所有的样式也都是基于这个盒子 content(内容):盒子的内容padding(内边距):用于控制元素内部与边框之间的距离border(边框&…

Qt打开及创建项目,运行程序(1)

安装之后, 1.文件->新建文件或项目 2.Application->Qt Widgets Application 3.自己设置名称和路径 4.这一步非常非常重要,要选择编译器,(MinGW是可以在Qt里用,如果想与VS交互,要选择MSVC&#xff09…

去除pdf/word的水印艺术字

对于pdf中的水印如果无法去除水印,则先另存为word,然后再按下面办法处理即可: 查看宏,创建:删除艺术字 添加内容: Sub 删除艺术字()Dim sh As ShapeFor Each sh In ActiveDocument.ShapesIf sh.Type msoT…

如何使用谷歌浏览器连接linux服务器SSH服务

环境: 谷歌浏览器 版本 116.0.5845.141(正式版本) (64 位) Win10 专业版 安全外壳 (SSH)v.0.58 问题描述: 如何使用谷歌浏览器连接linux服务器SSH服务 解决方案: 1.找了有台安装好了这个插…

计算机视觉实战项目(图像分类+目标检测+目标跟踪+姿态识别+车道线识别+车牌识别)

图像分类 教程博客_传送门链接:链接 在本教程中,您将学习如何使用迁移学习训练卷积神经网络以进行图像分类。您可以在 cs231n 上阅读有关迁移学习的更多信息。 本文主要目的是教会你如何自己搭建分类模型,耐心看完,相信会有很大收获。废话不…

Vite+React+Electron开发入门,10分钟搭建本地环境并打包

前言 想使用vite和react开发跨平台桌面的软件方案有electron和tauri两种,但是我个人更喜欢tauri,无奈electron名声大燥,面试要求里很多都写着:electron...可见这类公司多么落后。但是呢,又秉持着存在即合理的理念&…

Ubuntu22.04开启后屏幕黄屏

1. 故障现象 系统:Ubuntu22.04 现象:电脑从开机到进入桌面一直屏幕黄屏 2. 故障分析 可能为屏幕色彩调节出现故障 3. 解决方案 系统设置——》色彩——》删除原来的配置(remove profile)——》添加配置Colorspace:Compatibl…

八股——const 关键字

1.const作用 作用&#xff1a;const用于保护指针指向数据不被修改 测试代码1 显示数组的函数不小心修改了指针指向的值&#xff0c;这时候没有加const关键字&#xff0c;编译器不会报错 #include <stdio.h> void showar(int ar[]);int main(void) {int ar[4]{2,3,4,5…

antd react 文件上传只允许上传一个文件且上传后隐藏上传按钮

antd react 文件上传只允许上传一个文件且上传后隐藏上传按钮 效果图代码解析 效果图 代码解析 import { Form, Upload, message } from antd; import { PlusOutlined } from ant-design/icons; import { useState, useEffect } from react; import { BASE_URL } from /utils/…

kafka增加磁盘或者分区,topic重分区

场景&#xff1a;kafka配置文件log.dirs增加了几个目录&#xff0c;但是新目录没有分区数据写入&#xff0c;所以打算进行重分区一下。 1.生成迁移计划 进入kafka/bin目录 新建 topic-reassign.json,把要重分区的topic按下面格式写。 { "topics": [{ …

深度学习基础之梯度下降

1. 引言 梯度下降是一种用于最小化&#xff08;或最大化&#xff09;损失函数的优化算法。它是机器学习和深度学习中的一个关键概念&#xff0c;通常用于调整学习算法中的参数。 梯度下降背后的核心思想是迭代调整参数以最小化损失函数。它的工作原理是计算损失函数相对于每个…

2023-09-12 LeetCode每日一题(课程表 IV)

2023-03-29每日一题 一、题目编号 1462. 课程表 IV二、题目链接 点击跳转到题目位置 三、题目描述 你总共需要上 numCourses 门课&#xff0c;课程编号依次为 0 到 numCourses-1 。你会得到一个数组 prerequisite &#xff0c;其中 prerequisites[i] [ai, bi] 表示如果你…

C基础-操作符详解

操作符分类&#xff1a; 算数操作符&#xff1a; - * / % //算数操作符 // int main() // { // // /除法 1.整数除法(除号两端都是整数) 2浮点数除法&#xff0c;除号的两端只要有一个小数就执行小数除法 // // 除法中&#xff0c;除数为0 // int a 7 / 2; /…

Matlab图像处理-彩色图像基础

彩色的物理认识 人类能够感知的物体的颜色是由物体反射的光的性质决定的。如图8-2所示&#xff0c;可见光是由电磁波谱中较窄的波段组成。 如果物体反射的光在所有可见光波长范围内都是平衡的&#xff0c;那么从观察者的角度来看&#xff0c;它是白色的&#xff1b; 如果物体…

UG\NX CAM二次开发 设置工序检查边界 UF_CAMBND_append_bnd_from_curve

文章作者:代工 来源网站:NX CAM二次开发专栏 简介: UG\NX CAM二次开发 设置工序检查边界 UF_CAMBND_append_bnd_from_curve 效果: 代码: static int init_proc(UF_UI_selection_p_t select, void* user_data) { int errorCode = 0; int num_triples = 1; //…

解决php导出excel中小数尾部0不显示的问题

调整代码前&#xff1a; 新增代码&#xff1a; //小数避免末尾0不显示的问题 foreach ($list as &$line) {foreach ($line as &$column) {if (is_numeric($column) && strpos($column, .)!false) {$column " {$column} ";}} } 效果&#xf…

SpringBoot整合Easy-ES操作演示文档

文章目录 SpringBoot整合Easy-ES操作演示文档1 概述及特性1.1 官网1.2 主要特性 2 整合配置2.1 导入POM2.2 Yaml配置2.3 EsMapperScan 注解扫描2.4 配置Entity2.5 配置Mapper 3 基础操作3.1 批量保存3.2 数据更新3.3 数据删除3.4 组合查询3.5 高亮查询3.6 统计查询 4 整合异常4…

深度学习:循环神经网络RNN及LSTM

深度学习&#xff1a;循环神经网络RNN及LSTM 循环神经网络RNN原理代码 长短期记忆网络LSTM原理遗忘门记忆门输出门 代码 循环神经网络RNN 原理 对于传统的神经网络&#xff0c;它的信号流从输入层到输出层依次流过&#xff0c;同一层级的神经元之间&#xff0c;信号是不会相互…

华为CD32键盘使用教程

华为CD32键盘使用教程 用爱发电写的教程&#xff01; 最后更新时间&#xff1a;2023.9.12 型号&#xff1a;华为有线键盘CD32 基本使用 此键盘在不安装驱动的情况下可以直接使用&#xff0c;但是不安装驱动指纹识别是无法使用的&#xff01;并且NFC功能只支持华为的部分电脑…