Markdown Vue 项目总结

# Markdown Vue 项目总结

## 项目概述

这是一个集成 Monaco 编辑器的 Vue 3 Markdown 项目，支持 Markdown 编辑和实时预览。项目同时提供了 MCP 服务，用于将 Markdown 文档转换为静态 HTML 文件。

## 核心功能

### 编辑器功能
– ✨ **实时预览** – 编辑时实时查看 Markdown 渲染效果
– 📝 **Markdown 支持** – 完整的 Markdown 语法支持
– 🎨 **代码高亮** – 代码块语法高亮显示
– 🔧 **工具栏** – 快速插入常用格式（粗体、斜体、链接、图片、代码块等）
– 👁️ **多种视图** – 支持分栏、仅编辑、仅预览三种视图模式
– 📱 **响应式布局** – 自适应不同屏幕尺寸
– ⚡ **高性能** – 基于 Vite 构建，快速热更新
– 🎯 **智能编辑** – Monaco 编辑器提供的强大编辑功能

### MCP 服务功能
– ✅ **完整的 Markdown 支持** – 支持所有标准 Markdown 语法
– 📊 **Mermaid 图表支持** – 自动渲染 Mermaid 流程图、时序图等
– 🎨 **美观的样式** – 内置现代化的 CSS 样式
– 🔒 **安全处理** – 使用 DOMPurify 确保 HTML 安全
– 📱 **响应式设计** – 生成的 HTML 适配不同屏幕尺寸

## 技术栈

### 前端技术
– **Vue 3** – 渐进式 JavaScript 框架（Composition API）
– **Monaco Editor** – VS Code 使用的代码编辑器
– **Marked** – Markdown 解析库
– **DOMPurify** – HTML 安全处理库
– **Vite** – 下一代前端构建工具
– **Electron** – 桌面应用打包

### MCP 服务技术
– **@modelcontextprotocol/sdk** – MCP SDK
– **marked** – Markdown 解析
– **dompurify** – HTML 安全处理
– **mermaid** – 图表渲染
– **jsdom** – DOM 环境（用于 DOMPurify）

## 项目结构

“`
Monaco/
├── docs/ # 项目文档
│ ├── electron-packaging/ # Electron 打包相关文档
│ └── project-summary.md # 项目总结文档
├── mcp/ # MCP 服务
│ ├── README.md # MCP 服务说明
│ ├── server.js # MCP 服务入口
│ └── package.json # MCP 服务配置
├── project/ # 前端项目
│ ├── src/ # 源代码
│ │ ├── components/ # 组件
│ │ ├── composables/ # 组合式函数
│ │ ├── store/ # 状态管理
│ │ └── utils/ # 工具函数
│ ├── package.json # 项目配置
│ └── vite.config.js # Vite 配置
├── README.md # 项目说明
└── package.json # 根项目配置
“`

## 快速开始

### 安装依赖

“`bash
cd Monaco
npm install
cd project
npm install
cd ../mcp
npm install
“`

### 启动开发服务器

“`bash
cd project
npm run dev
“`

项目将在 `http://localhost:3000` 启动

### 构建生产版本

“`bash
cd project
npm run build
“`

### 打包 Electron 应用

“`bash
cd project
npm run electron:build
“`

## 浏览器支持

– Chrome (最新版本)
– Firefox (最新版本)
– Safari (最新版本)
– Edge (最新版本)

## 许可证

MIT