mirror of
https://github.com/microsoft/monaco-editor.git
synced 2025-12-22 11:35:40 +01:00
Update README.md
This commit is contained in:
parent
668420adc0
commit
dd87e491f3
1 changed files with 27 additions and 26 deletions
|
|
@ -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
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue