kromalee / vuepress-demo

type	content
demo/snippet	vuepress-demo algorithm-demo linux-demo java-demo typescript-demo c-demo
package	html5-rtsp-player bpmn-porcess-designer
project	hospital-medical-education-admin-ui hospital-medical-education-admin-exam-ui big-screen1 activity-reserve-mini-program signal-filter-designer
template
config
workspace	Notion Obsidian
awesome	fe-resource f2e-tech-checklist acc-wealth
starts	Github Stars

vuepress-demo's Issues

单页面应用

• 6.1 前端MV*原理
• 6.2 前端MVC架构原理
• 6.3 进阶：设计双向绑定的MVC
• 6.4 前端框架选型
  • 6.4.1 选型考虑因素
  • 6.4.2 框架类型：大而全还是小而美
  • 6.4.3 框架：React
  • 6.4.4 框架：Angular
  • 6.4.5 框架：Vue
  • 6.4.6 选型总结
• 6.5 启动前端应用
  • 6.5.1 创建应用脚手架
  • 6.5.2 构建组件库
  • 6.5.3 考虑浏览器的支持范围
• 6.6 服务端渲染
  • 6.6.1 非JavaScript语言的同构渲染
  • 6.6.2 基于JavaScript语言的同构渲染
  • 6.6.3 预渲染
• 6.7 小结

模式:对用户零信任策略

1.取系统时间仅在非关键场景,例如推荐默认值 填写

工作流设计

• 3.1 代码之旅：基础规范
• 3.2 代码组织决定应用架构
• 3.3 统一代码风格，避免架构腐烂
• 3.4 使用Lint规范代码
• 3.5 规范化命名，提升可读性
  • 3.5.1 命名法
  • 3.5.2 CSS及其预处理器命名规则
  • 3.5.3 组件命名规则
• 3.6 规范开发工具，提升开发效率
• 3.7 项目的文档化：README搭建指南
• 3.8 绘制架构图：减少沟通成本
  • 3.8.1 代码生成
  • 3.8.2 专业工具
  • 3.8.3 软件附带工具
  • 3.8.4 在线工具
• 3.9 可编辑文档库：提升协作性
• 3.10 记录架构决策：轻量级架构决策记录
• 3.11 可视化文档：注重代码的可读性
• 3.12 看板工具：统一管理业务知识
• 3.13 提交信息：每次代码提交文档化
  • 3.13.1 项目方式
  • 3.13.2 开源项目方式
  • 3.13.3 对比不同文档方式
• 3.14 通过流程化提高代码质量
  • 3.14.1 代码预处理
  • 3.14.2 手动检视代码
• 3.15 使用工具提升代码质量
  • 3.15.1 代码扫描工具
  • 3.15.2 IDE 快速重构
• 3.16 测试策略
  • 3.16.1 单元测试
  • 3.16.2 组件测试
  • 3.16.3 契约/接口测试
• 3.17 小结

补丁式修改代码

尽量减小对原有业务稳定性影响

微前端架构

• 9.1 微前端
  • 9.1.1 微前端架构
  • 9.1.2 为什么需要微前端
• 9.2 微前端的技术拆分方式
  • 9.2.1 路由分发式
  • 9.2.2 前端微服务化
  • 9.2.3 组合式集成：微应用化
  • 9.2.4 微件化
  • 9.2.5 前端容器：iframe
  • 9.2.6 结合Web Components构建
• 9.3 微前端的业务划分方式
  • 9.3.1 按照业务拆分
  • 9.3.2 按照权限拆分
  • 9.3.3 按照变更的频率拆分
  • 9.3.4 按照组织结构拆分
  • 9.3.5 跟随后端微服务拆分
  • 9.3.6 DDD与事件风暴
• 9.4 微前端的架构设计
  • 9.4.1 构建基础设施
  • 9.4.2 提取组件与模式库
  • 9.4.3 应用通信机制
  • 9.4.4 数据管理
  • 9.4.5 专用的构建系统
• 9.5 微前端的架构模式
  • 9.5.1 基座模式
  • 9.5.2 自组织模式
• 9.6 微前端的设计理念
  • 9.6.1 中心化：应用注册表
  • 9.6.2 标识化应用
  • 9.6.3 生命周期
  • 9.6.4 高内聚，低耦合
• 9.7 “微”害架构
  • 9.7.1 微架构
  • 9.7.2 架构的演进
  • 9.7.3 微架构带来的问题
  • 9.7.4 解决方式：可拆分式微架构
• 9.8 小结

• 10.1 遗留系统：路由分发
  • 10.1.1 路由分发式微前端
  • 10.1.2 路由分发的测试
• 10.2 遗留系统微前端：使用iframe作为容器
• 10.3 微应用化
  • 10.3.1 微应用化
  • 10.3.2 架构实施
  • 10.3.3 测试策略
• 10.4 前端微服务化
  • 10.4.1 微服务化设计方案
  • 10.4.2 通用型前端微服务化：Single-SPA
  • 10.4.3 定制型前端微服务化：Mooa
  • 10.4.4 前端微服务化总结
• 10.5 组件化微前端：微件化
  • 10.5.1 运行时编译微件化：动态组件渲染
  • 10.5.2 预编译微件化
• 10.6 面向未来：Web Components
  • 10.6.1 Web Components
  • 10.6.2 纯Web Components方式
  • 10.6.3 结合Web Components方式
• 10.7 小结

前端模板

前端模板
考虑复用

抽象复用体系

前端系统架构

前端系统架构

现用前端框架问题

👍标识 已在新版本包含
👀标识 暂无方案

前后端分离架构

• 8.1 前后端分离
  • 8.1.1 为什么选择前后端分离
  • 8.1.2 前后端分离的开发模式
  • 8.1.3 前后端分离的API设计
• 8.2 API管理模式：API文档管理方式
• 8.3 前后端并行开发：Mock Server
  • 8.3.1 什么是Mock Server
  • 8.3.2 三种类型Mock Server的比较
  • 8.3.3 Mock Server的测试：契约测试
  • 8.3.4 前后端并行开发总结
• 8.4 服务于前端的后端：BFF
  • 8.4.1 为什么使用BFF
  • 8.4.2 前后端如何实现BFF
  • 8.4.3 使用GraphQL作为BFF
• 8.5 小结

DevOps最佳实践

https://github.com/phodal/ledge

表格组件相关

表格组件相关

静态网站打包成chm

静态网站打包成chm

模式: 配置生成+自定义嵌入+合并参数

• 一部分界面通过配置生成
• 一部分界面使用嵌入页面/嵌入组件
• 两个页面合并参数 提交

添加 可读性非常高的代码plop模板

列表,编辑 等各种业务模式的说明

使用可读性非常高的代码模板来讲解

表单组件相关

表单组件相关

文档方案重构[TBD]

抽离主题

1. json配置里可选自动生成多文件侧边栏

文档更新提醒,和文档更新历史[TBD]

基于git commit 的文档更新提醒自动发送到企业微信群
文档更新历史 changeLog

组件化架构

• 7.1 前端的组件化架构
• 7.2 基础：风格指南
  • 7.2.1 原则与模式
  • 7.2.2 色彩
  • 7.2.3 文字排印
  • 7.2.4 布局
  • 7.2.5 组件
  • 7.2.6 文档及其他
  • 7.2.7 维护风格指南
• 7.3 重用：模式库
  • 7.3.1 组件库
  • 7.3.2 组件类型
  • 7.3.3 隔离：二次封装
• 7.4 进阶：设计系统
  • 7.4.1 设立原则，创建模式
  • 7.4.2 原子设计
  • 7.4.3 维护与文档
• 7.5 跨框架组件化
  • 7.5.1 框架间互相调用：Web Components
  • 7.5.2 跨平台模式库
• 7.6 小结

设计构建流

• 4.1 依赖管理工具
• 4.2 软件包源管理
• 4.3 前端代码的打包
• 4.4 设计构建流
• 4.5 持续交付问题
• 4.6 小结

演进式架构

• 11.1 更新
  • 11.1.1 依赖和框架版本升级
  • 11.1.2 语言版本升级
  • 11.1.3 遗留系统重搭
• 11.2 迁移
  • 11.2.1 架构迁移的模式
  • 11.2.2 迁移方式：微前端
  • 11.2.3 迁移方式：寻找容器
• 11.3 重构
  • 11.3.1 架构重构
  • 11.3.2 组件提取、函数提取、样式提取
  • 11.3.3 引入新技术
• 11.4 重写
  • 11.4.1 重写能解决问题吗
  • 11.4.2 梳理业务
  • 11.4.3 沉淀新架构
• 11.5 重新架构
  • 11.5.1 重搭架构
  • 11.5.2 增量改写
• 11.6 小结

模式:框架,平台/模式,业务三层解耦

组件化

组件化

流程框架

流程框架

模式: RBAC 最佳实践,方便业务人员

1. 最佳方案(标准): 配置多套菜单,内容共用,元数据共用,根据不同的场景做差异业务