mirror of
https://github.com/microsoft/monaco-editor.git
synced 2025-12-22 16:15:41 +01:00
71 lines
No EOL
1.4 KiB
Markdown
71 lines
No EOL
1.4 KiB
Markdown
|
|
# Monaco Editor with Vue.js and Vite
|
|
|
|
This is a sample project using Vue.js 3, Vite, and Monaco Editor.
|
|
|
|
## Features
|
|
|
|
- ✅ Vue.js 3 Composition API
|
|
- ✅ TypeScript support
|
|
- ✅ Vite build tool
|
|
- ✅ Monaco Editor integration
|
|
- ✅ Syntax highlighting and code completion
|
|
- ✅ Multi-language support (TypeScript, JavaScript, JSON, CSS, HTML)
|
|
|
|
## Installation
|
|
|
|
```bash
|
|
npm install
|
|
```
|
|
|
|
## Usage
|
|
|
|
Development mode:
|
|
```bash
|
|
npm run dev
|
|
```
|
|
|
|
Build for production:
|
|
```bash
|
|
npm run build
|
|
```
|
|
|
|
Preview production build:
|
|
```bash
|
|
npm run serve
|
|
```
|
|
|
|
## Project Structure
|
|
|
|
```
|
|
src/
|
|
├── components/
|
|
│ └── Editor.vue # Monaco Editor component
|
|
├── main.ts # Vue app entry
|
|
├── userWorker.ts # Monaco Editor Workers config
|
|
└── vite-env.d.ts # TypeScript type declarations
|
|
```
|
|
|
|
## Tech Stack
|
|
|
|
- Vue.js 3
|
|
- TypeScript
|
|
- Vite
|
|
- Monaco Editor
|
|
|
|
## Comparison with React Version
|
|
|
|
This Vue version has the same features as the React version. Main differences:
|
|
|
|
1. Uses Vue 3 Composition API instead of React Hooks
|
|
2. Uses `@vitejs/plugin-vue` instead of `@vitejs/plugin-react`
|
|
3. Uses `.vue` single file components instead of `.tsx` files
|
|
4. Uses `createApp` instead of `ReactDOM.render`
|
|
|
|
## Monaco Editor Configuration
|
|
|
|
Monaco Editor runs via Web Workers and supports the following languages:
|
|
- TypeScript/JavaScript
|
|
- JSON
|
|
- CSS/SCSS/Less
|
|
- HTML/Handlebars/Razor |