From 7c5d06b8dcf9f453c0085d2983f2f1372715df2a Mon Sep 17 00:00:00 2001 From: imguolao Date: Thu, 12 Sep 2024 11:26:59 +0800 Subject: [PATCH] docs: update README --- README.md | 11 +++++++---- README.zh-CN.md | 7 +++++-- packages/editor/README.md | 11 +++++++---- 3 files changed, 19 insertions(+), 10 deletions(-) diff --git a/README.md b/README.md index 93f778b..7690684 100644 --- a/README.md +++ b/README.md @@ -2,7 +2,7 @@ Use `monaco-editor` loaded from CDN in Vue 2&3, no need to bundling. -[![gitHub license](https://img.shields.io/badge/license-MIT-blue.svg)](https://github.com/imguolao/monaco-vue/blob/main/LICENSE) [![npm version](https://img.shields.io/npm/v/@guolao/vue-monaco-editor.svg?style=flat)](https://www.npmjs.com/package/@guolao/vue-monaco-editor) +[![gitHub license](https://img.shields.io/badge/license-MIT-blue.svg)](https://github.com/imguolao/monaco-vue/blob/main/LICENSE) [![npm version](https://img.shields.io/npm/v/@guolao/vue-monaco-editor.svg?style=flat)](https://www.npmjs.com/package/@guolao/vue-monaco-editor) [![npm downloads](https://img.shields.io/npm/dm/%40guolao%2Fvue-monaco-editor)](https://www.npmjs.com/package/@guolao/vue-monaco-editor) English | [简体中文](https://github.com/imguolao/monaco-vue/blob/main/README.zh-CN.md) @@ -12,7 +12,7 @@ The `monaco-editor` doesn't support ESM very well, which results in large files But the official team has written a loader to lazy load files of the editor remotely, so we can load the files from a CDN to use it. -If you still want to import `monaco-editor` files from `node_modules` and bundle them into your code (without using remote loading), you will need to use a bundling tool.See [here](#npm-package). +If you still want to import `monaco-editor` files from `node_modules` and bundle them into your code (without using remote loading), you will need to use a bundling tool. See [here](#npm-package). ## Installation @@ -39,7 +39,7 @@ Of course, you can also use [unpkg](https://unpkg.com/@guolao/vue-monaco-editor/ ## Usage -Register the component. +**Global Registration** ```ts import { createApp } from 'vue' @@ -52,8 +52,11 @@ app.use(VueMonacoEditorPlugin, { vs: 'https://cdn.jsdelivr.net/npm/monaco-editor@0.43.0/min/vs' }, }) +``` + +**Local Registration** -// You can also: +```ts // main.ts import { loader } from '@guolao/vue-monaco-editor' loader.config({ diff --git a/README.zh-CN.md b/README.zh-CN.md index 31cb397..18809bb 100644 --- a/README.zh-CN.md +++ b/README.zh-CN.md @@ -2,7 +2,7 @@ 在 `Vue 2&3` 中使用从 CDN 远程加载的 `monaco-editor`，不需要打包。 -[![gitHub license](https://img.shields.io/badge/license-MIT-blue.svg)](https://github.com/imguolao/monaco-vue/blob/main/LICENSE) [![npm version](https://img.shields.io/npm/v/@guolao/vue-monaco-editor.svg?style=flat)](https://www.npmjs.com/package/@guolao/vue-monaco-editor) +[![gitHub license](https://img.shields.io/badge/license-MIT-blue.svg)](https://github.com/imguolao/monaco-vue/blob/main/LICENSE) [![npm version](https://img.shields.io/npm/v/@guolao/vue-monaco-editor.svg?style=flat)](https://www.npmjs.com/package/@guolao/vue-monaco-editor) [![npm downloads](https://img.shields.io/npm/dm/%40guolao%2Fvue-monaco-editor)](https://www.npmjs.com/package/@guolao/vue-monaco-editor) 简体中文 | [English](https://github.com/imguolao/monaco-vue/blob/main/README.md) @@ -52,8 +52,11 @@ app.use(VueMonacoEditorPlugin, { vs: 'https://cdn.jsdelivr.net/npm/monaco-editor@0.43.0/min/vs' }, }) +``` + +不全局注册组件 -// 也可以不全局注册组件 +```ts // main.ts import { loader } from '@guolao/vue-monaco-editor' loader.config({ diff --git a/packages/editor/README.md b/packages/editor/README.md index 93f778b..7690684 100644 --- a/packages/editor/README.md +++ b/packages/editor/README.md @@ -2,7 +2,7 @@ Use `monaco-editor` loaded from CDN in Vue 2&3, no need to bundling. -[![gitHub license](https://img.shields.io/badge/license-MIT-blue.svg)](https://github.com/imguolao/monaco-vue/blob/main/LICENSE) [![npm version](https://img.shields.io/npm/v/@guolao/vue-monaco-editor.svg?style=flat)](https://www.npmjs.com/package/@guolao/vue-monaco-editor) +[![gitHub license](https://img.shields.io/badge/license-MIT-blue.svg)](https://github.com/imguolao/monaco-vue/blob/main/LICENSE) [![npm version](https://img.shields.io/npm/v/@guolao/vue-monaco-editor.svg?style=flat)](https://www.npmjs.com/package/@guolao/vue-monaco-editor) [![npm downloads](https://img.shields.io/npm/dm/%40guolao%2Fvue-monaco-editor)](https://www.npmjs.com/package/@guolao/vue-monaco-editor) English | [简体中文](https://github.com/imguolao/monaco-vue/blob/main/README.zh-CN.md) @@ -12,7 +12,7 @@ The `monaco-editor` doesn't support ESM very well, which results in large files But the official team has written a loader to lazy load files of the editor remotely, so we can load the files from a CDN to use it. -If you still want to import `monaco-editor` files from `node_modules` and bundle them into your code (without using remote loading), you will need to use a bundling tool.See [here](#npm-package). +If you still want to import `monaco-editor` files from `node_modules` and bundle them into your code (without using remote loading), you will need to use a bundling tool. See [here](#npm-package). ## Installation @@ -39,7 +39,7 @@ Of course, you can also use [unpkg](https://unpkg.com/@guolao/vue-monaco-editor/ ## Usage -Register the component. +**Global Registration** ```ts import { createApp } from 'vue' @@ -52,8 +52,11 @@ app.use(VueMonacoEditorPlugin, { vs: 'https://cdn.jsdelivr.net/npm/monaco-editor@0.43.0/min/vs' }, }) +``` + +**Local Registration** -// You can also: +```ts // main.ts import { loader } from '@guolao/vue-monaco-editor' loader.config({