《Remy学习与应用》系统设计

1. 引言

1.1. 背景

为了进一步提升自身技术实力，摆脱 2023 年 8 月 21 日以来因找工作不顺的困境，从 2023 年 9 月 8 日星期五这天开始制定作息时间，学习目标，充分利用时间，实现自我提升。

1.2. 目的

为了增强学习的计划性、有效性、趣味性，将学习的内容、过程和结果融合在一起，设计了本系统。

1.3. 参考资料

① 服务端渲染 SSR

《前端服务框架调研：Next.js、Nuxt.js、Nest.js、Fastify》

《如何评价最近新出现的前端框架 Astro？》

《Astro DOCS》

② 微前端

《2023 微前端技术方案选型》

《qiankun 文档》

③ css 框架

《Tailwind 真香》

《tailwind 和 bootstrap 对比优劣有哪些，给前端开发者的一些建议》

④ 包管理器

《PNPM（高性能的 npm）介绍》

《深入浅出 npm & yarn & pnpm 包管理机制》

⑤ 服务端

《Nest 中文文档》

《TypeORM 中文文档》

2. 设计概述

2.1 任务和目标

本次学习提升内容包括微前端 qiankun、css 预编译语言（less、sass、stylus）、工程化/打包工具（webpack、gulp、grunt、rollup、vite）、持续部署 CI/CD、理论知识（数据结构算法、浏览器工作原理、垃圾回收机制、扩展性、程序设计等）、服务端渲染 SSR、对比包管理（npm/pnpm/yarn/bower）、模块管理（umd/amd/common.js/module）、bootstrap、vue+react 源码解析等。

本系统将涵盖响应式布局（pc+mobile）、微前端、nodejs+SSR、三维可视化（点、海量点聚合、特效等）、大屏可视化、css3 特效、动画、单元测试、mock 数据、兼容各 pc/mobile 浏览器、性能指标及优化、web 安全等方面、线上监控（性能/异常的收集和统计）等。

2.2. 模块

门户(SEO)：

笔记(SEO)：每天或每学习一种技术写一篇内容易于理解的笔记对当前学习内容记录总结（同步发布到 CSDN），留言需等登录，或转至 CSDN。文章支持标签、分类、原创标识、阅读、收藏、点赞、打赏、评论、全文检索。

示例：WebGIS 可视化、自定义可视化、动效动画、线上监控（统计图表：访问量、性能指标、异常）。

注册登录：邮箱验证码注册，邮箱+密码+随机验证码登录。

后台管理：仅管理员账号可见，笔记发布管理、示例发布管理、用户统计分析。

2.3. 技术选型

包管理器: pnpm

2.3.1. 前端

门户：Astro(SSR)+Vue3+Typescript 生成 SSG 静态资源

笔记：Astro(SSR)+Vue3+Typescript+Iframe

示例：微应用 qiankun+主应用 Vue3+Typescript+子应用 Vue3/React+Cesiumjs+Echarts+*

后台管理：Vue3+Typescript+ElementPlus+Echarts

2.3.2. 后端

笔记/示例/认证服务：NestJs+Redis+Mysql+Mongodb

日志存储与统计分析服务：*+Mongodb

2.3.3. 部署

持续集成部署：Docker+Jenkins

3. 总体设计

4. 结束语

因个人知识面的局限性，如有不正确或异议的地方，望大家指正。

以后的学习笔记和实践示例将持续添加到本系统。

感兴趣的同学可以订阅专栏，关注博主，一起学习进步。

如若转载，请注明出处：https://blog.csdn.net/remy0817/article/details/132918639