Update README.md

This commit is contained in:
Dennis Chen 2025-09-17 14:33:06 +08:00
parent 668420adc0
commit dd87e491f3

View file

@ -1,69 +1,70 @@
# Monaco Editor with Vue.js and Vite # Monaco Editor with Vue.js and Vite
这是一个使用Vue.js 3、Vite和Monaco Editor的示例项目。 This is a sample project using Vue.js 3, Vite, and Monaco Editor.
## 特性 ## Features
- ✅ Vue.js 3 Composition API - ✅ Vue.js 3 Composition API
- ✅ TypeScript 支持 - ✅ TypeScript support
- ✅ Vite 构建工具 - ✅ Vite build tool
- ✅ Monaco Editor 集成 - ✅ Monaco Editor integration
- ✅ 语法高亮和代码补全 - ✅ Syntax highlighting and code completion
- ✅ 多语言支持TypeScript、JavaScript、JSON、CSS、HTML - ✅ Multi-language support (TypeScript, JavaScript, JSON, CSS, HTML)
## 安装 ## Installation
```bash ```bash
npm install npm install
``` ```
## 运行 ## Usage
开发模式: Development mode:
```bash ```bash
npm run dev npm run dev
``` ```
构建生产版本: Build for production:
```bash ```bash
npm run build npm run build
``` ```
预览构建版本: Preview production build:
```bash ```bash
npm run serve npm run serve
``` ```
## 项目结构 ## Project Structure
``` ```
src/ src/
├── components/ ├── components/
│ └── Editor.vue # Monaco Editor 组件 │ └── Editor.vue # Monaco Editor component
├── main.ts # Vue 应用入口 ├── main.ts # Vue app entry
├── userWorker.ts # Monaco Editor Workers 配置 ├── userWorker.ts # Monaco Editor Workers config
└── vite-env.d.ts # TypeScript 类型声明 └── vite-env.d.ts # TypeScript type declarations
``` ```
## 技术栈 ## Tech Stack
- Vue.js 3 - Vue.js 3
- TypeScript - TypeScript
- Vite - Vite
- Monaco Editor - Monaco Editor
## 对比 React 版本 ## Comparison with React Version
这个 Vue 版本与 React 版本功能相同,主要区别: This Vue version has the same features as the React version. Main differences:
1. 使用 Vue 3 Composition API 替代 React Hooks 1. Uses Vue 3 Composition API instead of React Hooks
2. 使用 `@vitejs/plugin-vue` 替代 `@vitejs/plugin-react` 2. Uses `@vitejs/plugin-vue` instead of `@vitejs/plugin-react`
3. 使用 `.vue` 单文件组件替代 `.tsx` 文件 3. Uses `.vue` single file components instead of `.tsx` files
4. 使用 `createApp` 替代 `ReactDOM.render` 4. Uses `createApp` instead of `ReactDOM.render`
## Monaco Editor 配置 ## Monaco Editor Configuration
Monaco Editor 通过 Web Workers 运行,支持以下语言: Monaco Editor runs via Web Workers and supports the following languages:
- TypeScript/JavaScript - TypeScript/JavaScript
- JSON - JSON
- CSS/SCSS/Less - CSS/SCSS/Less