Skip to content

superAo005/Online-Collaborative-Editing

Repository files navigation

⚡ 项目简介

技术栈=Vue3、TypeScript、Element Plus、Pinia 和 Vite 等主流技术 Quill TinyMce Tiptap2

特性

  • Quill:易扩展、轻量级二开、代码高亮好用的富文本编辑器
  • TinyMce:富文本编辑器里的在线版的 Word ,功能想不到的丰富
  • Tiptap2:比其他编辑器更棒的地方在于多人在线实时编辑更高程度的支持了多人在线实时协同编辑
  • Yjs:实现协同编辑,基于CRDT算法
  • Vue3:采用 Vue3 + script setup 最新的 Vue3 组合式 API
  • Element Plus:Element UI 的 Vue3 版本
  • Pinia: 传说中的 Vuex5
  • Vite:真的很快
  • Vue Router:路由路由
  • TypeScript:JavaScript 语言的超集
  • PNPM:更快速的,节省磁盘空间的包管理工具
  • Scss:和 Element Plus 保持一致
  • CSS 变量:主要控制项目的布局和颜色
  • ESlint:代码校验
  • Prettier:代码格式化
  • Axios:发送网络请求(已封装好)
  • UnoCSS:具有高性能且极具灵活性的即时原子化 CSS 引擎
  • 兼容移动端: 布局兼容移动端页面分辨率

功能

  • 用户管理:登录、登出演示
  • 权限管理:内置页面权限(动态路由)、指令权限、权限函数、路由守卫
  • 多环境:开发环境(development)、预发布环境(uat)、正式环境(production)
  • 多主题:内置普通、黑暗、深蓝三种主题模式
  • 多布局:内置左侧、顶部、混合三种布局模式
  • 错误页面: 403、404
  • Dashboard:根据不同用户显示不同的 Dashboard 页面
  • 其他内置功能:SVG、动态侧边栏、动态面包屑、标签页快捷导航、Screenfull 全屏、自适应收缩侧边栏、Hook(Composables)

🚀 开发

# 配置
1. 一键安装 .vscode 目录中推荐的插件
2. node 版本 18.x 或 20+
3. pnpm 版本 8.x 或最新版

# 安装依赖
pnpm i

# 启动服务
pnpm dev

📦️ 多环境打包

# 构建预发布环境
pnpm build:stage

# 构建正式环境
pnpm build:prod

🔧 代码检查

# 代码格式化
pnpm lint

Git 提交规范参考

  • feat 增加新的业务功能
  • fix 修复业务问题/BUG
  • perf 优化性能
  • style 更改代码风格, 不影响运行结果
  • refactor 重构代码
  • revert 撤销更改
  • test 测试相关, 不涉及业务代码的更改
  • docs 文档和注释相关
  • chore 更新依赖/修改脚手架配置等琐事
  • workflow 工作流改进
  • ci 持续集成相关
  • types 类型定义文件更改
  • wip 开发中