Monorepo-uniapp 构建分享

Monorepo uniapp 

构建灵感:刚好要做一个项目,于是想到升级一下之前自己写的一个vue3+ts+pinia+uno的模版框架,其实那个框架也不错;只是感觉还差点东西,我已经用那个小框架写了两三个项目;轻巧实用。为什么选择去基于vben3构建uniapp 的monorepo架子,主要还是热爱,想去探索,去感受一下前沿的一些技术;生命在于折腾。

uni-app Vue3 + TypeScript + Vite + Pinia + Unocss 模板项目

uniapp-ts-unocss-pinia-vue3-demo 项目代码icon-default.png?t=N7T8https://gitee.com/ggbhack/uniapp-ts-unocss-pinia-vue3-demo.git用它做过的项目:

【把货】小程序

【赛客定位】小程序

【游记】h5

monorepo-uniapp项目代码仓库icon-default.png?t=N7T8https://gitee.com/ggbhack/monorepo-uniapp.git以上两个项目,喜欢研究的朋友也可以拿去自己改造改造;

vben3 参考基础icon-default.png?t=N7T8https://vbenjs.github.io/vben3-doc/

项目架构搭建中

---

- [x] vite-config

- [x] ts-config

- [x] unocss 样式

- [x] pinia 状态管理

- [x] env 环境变量

- [x] uview-plus ui库

- [x] mescroll-uni 刷新组件

- [x] lint-staged 提交前校验

- [x] pinia 缓存

还有一些其他的就不列出来;

---

以下遇到的问题汇总

为什么 uni-app (vue3) 和 @vueuse/core v10 一起用会报错?参考icon-default.png?t=N7T8https://juejin.cn/post/7308899425149042739

function createMockComponent(name) {

return {

setup() {

throw new Error(`[vue-demi] ${name} is not support vue2`)

},

}

}



export var TransitionGroup = /*__PURE__*/ createMockComponent('TransitionGroup')

Error: module 'common/side-channel.js' is not defined, require args is 'side-channel'icon-default.png?t=N7T8https://ask.dcloud.net.cn/question/177458

qs版本问题,换成6.5.3或其他版本试试

[uniapp 封装axios adapter 运行到小程序报错 Module not found: Error: Package path ./lib/core/settle is not exported from package D:\xxx\xxx\n..icon-default.png?t=N7T8https://www.jianshu.com/p/d1d6e0751d97

更换axios的版本为 "axios": "^0.26.1"

多语言打包小程序无效

换一种方式引入

import zh_CN from './lang/zh_CN'

import en from './lang/en'

// 这里改用另外一种方式

// const defaultLocal = await import(`./lang/${locale}.ts`);

// const message = defaultLocal.default?.message ?? {};

const messages: Record<string, any> = {

en,

zh_CN

}

// // const defaultLocal = zh_CN;

// const message = defaultLocal ?? {};

const message = messages[locale].message ?? {}

改造 getAppConfig

// 打包微信小程序报错 __PRODUCTION__VBEN_ADMIN__ 报错无法读取

function getAppConfig(env: Record<string, any>) {

// const ENV_NAME = getAppConfigFileName(env)



// const ENV = (

// env.DEV

// ? // Get the global configuration (the configuration will be extracted independently when packaging)

// env

// : window[ENV_NAME]

// ) as GlobEnvConfig

const ENV = env as GlobEnvConfig



// console.log(env,env.DEV)

const { VITE_GLOB_APP_SHORT_NAME } = ENV



if (!/^[a-zA-Z\_]*$/.test(VITE_GLOB_APP_SHORT_NAME)) {

console.warn(

`VITE_GLOB_APP_SHORT_NAME Variables can only be characters/underscores, please modify in the environment variables and re-running.`,

)

}



return ENV

}

unocss 打包小程序 样式报错多一个 \

固定unocss的版本号 - 后续看能不能解决控制台的警告

{

"unocss": "^0.51.8",

"unocss-preset-weapp": "^0.2.1"

}

[uniapp 的缓存处理 参考]icon-default.png?t=N7T8https://blog.csdn.net/weixin_43191327/article/details/134071863

在构建的过程中我移除了一些不必要的依赖包,当然还留了一些;具体可以看对应的代码;

这是我花了几天时间运行完之后的样子;可能还存在一些其他的问题,后续在慢慢的优化。

还是那句话:

一行动,就创新

一具体,就深刻

一困惑,就上网

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

CNN:Convolutional Neural Network(上)

目录 1 为什么使用 CNN 处理图像 2 CNN 的整体结构 2.1 Convolution 2.2 Colorful image 3 Convolution v.s. Fully Connected 4 Max Pooling 5 Flatten 6 CNN in Keras 原视频&#xff1a;李宏毅 2020&#xff1a;Convolutional Neural Network 1 为什么使用…

C#灵活控制多线程的状态(开始暂停继续取消)

ManualResetEvent类 ManualResetEvent是一个同步基元&#xff0c;用于在多线程环境中协调线程的执行。它提供了两种状态&#xff1a;终止状态和非终止状态。 在终止状态下&#xff0c;ManualResetEvent允许线程继续执行。而在非终止状态下&#xff0c;ManualResetEvent会阻塞线…

深度学习-标注文件处理(txt批量转换为json文件)

接上篇&#xff0c;根据脚本可将coco128的128张图片&#xff0c;按照比例划分成训练集、测试集、验证集&#xff0c;同时生成相应的标注的labels文件夹&#xff0c;最近再看实例分离比较火的mask rcnn模型&#xff0c;准备进行调试但由于实验室算力不足&#xff0c;网上自己租的…

stm32 - GPIO

stm32 - GPIO 基本结构输入输出 基本结构 所有GPIO都挂在APB2总线上 寄存器&#xff1a;内核通过APB2总线对寄存器进行读写&#xff0c;实现电平的读写 GPIO引脚的每一位对应寄存器中的某一位 GPIO中的驱动器是增加信号驱动能力的&#xff0c;用于增大驱动能力 输入 读取端口的…

初识C语言·内存函数

目录 1 memcpy的使用和模拟实现 2 memmove的使用和模拟实现 3 memset的使用和模拟实现 4 memcmp的使用和模拟实现 1 memcpy的使用和模拟实现 紧接字符串函数&#xff0c;出场的是第一个内存函数memcpy。前面讲的字符串函数是专门干关于字符串的事的&#xff0c;而这个函数…

如何使用程序控制微信发送消息

简介 使用杨中科老师的nuget包NetAutoGUI&#xff0c;控制微信给指定用户发送消息&#xff0c;如果想下面视频一样使用此功能用来轰炸朋友&#xff0c;可以直接跳到最后一节&#xff0c;或者直接下载我的打包好的程序集 【免费】控制微信发送消息的程序资源-CSDN文库 微信轰炸…

蓝桥杯备赛 | 洛谷做题打卡day5

蓝桥杯备赛 | 洛谷做题打卡day5 图论起航&#xff0c;一起来看看深&#xff08;广&#xff09;度优先吧 ~ 文章目录 蓝桥杯备赛 | 洛谷做题打卡day5图论起航&#xff0c;一起来看看深&#xff08;广&#xff09;度优先吧 ~【深基18.例3】查找文献题目描述 输入格式输出格式样例…

《如何制作类mnist的金融数据集》——1.数据集制作思路

1&#xff0e;数据集制作思路&#xff08;生成用于拟合金融趋势图像的分段线性函数&#xff09; 那么如何去制作这样的一个类minist的金融趋势曲线数据集呢&#xff1f; 还是如上图所示&#xff0c;为了使类别平均分布&#xff0c;因此可以选取三种“buy”的曲线、三种“sell”…

Web前端 ---- 【Vue3】computed计算属性和watch侦听属性(侦听被ref和reactive包裹的数据)

目录 前言 computed watch watch侦听ref数据 ref简单数据类型 ref复杂数据类型 watch侦听reactive数据 前言 本文介绍在vue3中的computed计算属性和watch侦听属性。介绍watch如何侦听被ref和reactive包裹的数据 computed 在vue3中&#xff0c;计算属性computed也是组合式…

C语言天花板——指针(经典题目)

指针我们已经学习的差不多了&#xff0c;今天我来给大家分享几个经典的题目&#xff0c;来让我们相互学习&#x1f3ce;️&#x1f3ce;️&#x1f3ce;️ int main() {int a[4] { 1, 2, 3, 4 };int* ptr1 (int*)(&a 1);int* ptr2 (int*)((int)a 1);printf("%x,%…

Java重修第六天—面向对象3

通过学习本篇文章可以掌握如下知识 1、多态&#xff1b; 2、抽象类&#xff1b; 3、接口。 之前已经学过了继承&#xff0c;static等基础知识&#xff0c;这篇文章我们就开始深入了解面向对象多态、抽象类和接口的学习。 多态 多态是在继承/实现情况下的一种现象&#xf…

随笔03 笔记整理

图源&#xff1a;文心一言 关于我的考研与信息安全类博文整理~&#x1f95d;&#x1f95d; 第1版&#xff1a;整理考研类博文~&#x1f9e9;&#x1f9e9; 第2版&#xff1a;提前列出博文链接&#xff0c;以便小伙伴查阅~&#x1f9e9;&#x1f9e9; 第3版&#xff1a;整理We…

学习记录-自动驾驶与机器人中的SLAM技术

以下所有内容均为高翔大神所注的《自动驾驶与机器人中的SLAM技术》中的内容 融合导航 1. EKF和优化的关系 2. 组合导航eskf中的预测部分&#xff0c;主要是F矩阵的构建 template <typename S> bool ESKF<S>::Predict(const IMU& imu) {assert(imu.timestamp…

基于杂交PSO算法的风光储微网日前优化调度(MATLAB实现)

微网中包含&#xff1a;风电、光伏、储能、微型燃气轮机&#xff0c;以最小化电网购电成本、光伏风机的维护成本、蓄电池充放电维护成本、燃气轮机运行成本及污染气体治理成本为目标&#xff0c;综合考虑&#xff1a;功率平衡约束、燃气轮机爬坡约束、电网交换功率约束、储能装…

Elasticsearch_8.11.4_kibana_8.11.4_metricbeat_8.11.4安装及本地部署_ELK日志部署

文章目录 Elasticsearch_8.11.4_kibana_8.11.4_metricbeat_8.11.4安装及本地部署_ELK日志部署分布式引擎Elasticsearch_8.11.4安装及本地部署系统环境要求1 Windows 安装 Elasticsearch下载完成后进行解压,进入 bin 目录,找到elasticsearch.bat脚本文件执行一键启动.启动都选允…

【Python学习】Python学习15-模块

目录 【Python学习】Python学习15-模块 前言创建语法引入模块from…import 语句from…import* 语句搜索路径PYTHONPATH 变量-*- coding: UTF-8 -*-导入模块现在可以调用模块里包含的函数了PYTHONPATH 变量命名空间和作用域dir()函数globals() 和 locals() 函数reload() 函数Py…

ROS2学习笔记一:安装及测试

目录 前言 1 ROS2安装与卸载 1.1 安装虚拟机 1.2 ROS2 humble安装 2 ROS2测试 2.1 topic测试 2.2 小海龟测试 2.3 RQT可视化 2.4 占用空间 前言 ROS2的前身是ROS&#xff0c;ROS即机器人操作系统&#xff08;Robot Operating System&#xff09;,ROS为了“提高机器人…

原生js实现拖拽效果

<!DOCTYPE html> <html> <head> <style> #mydiv { width: 200px; height: 200px; background-color: red; position: absolute; cursor: move; } </style> | </head> <body> <div id"mydiv">拖拽我…

基于java web的机票管理系统设计与实现设计与实现

末尾获取源码 开发语言&#xff1a;Java Java开发工具&#xff1a;JDK1.8 后端框架&#xff1a;SSM 前端&#xff1a;采用JSP技术开发 数据库&#xff1a;MySQL5.7和Navicat管理工具结合 服务器&#xff1a;Tomcat8.5 开发软件&#xff1a;IDEA / Eclipse 是否Maven项目&#x…

机器学习扩散模型简介

一、说明 扩散模型的迅速崛起是过去几年机器学习领域最大的发展之一。在这本易于理解的指南中了解您需要了解的有关扩散模型的所有信息。 扩散模型是生成模型&#xff0c;在过去几年中越来越受欢迎&#xff0c;这是有充分理由的。仅在 2020 年代发布的几篇开创性论文就向世界…