Doc: update

2026-02-17 22:08:25 +08:00 · 2023-12-27 09:57:25 +08:00
parent 6d378ca2e5
commit 8b99a6c191
8 changed files with 95 additions and 5 deletions
--- a/README.md
+++ b/README.md
@@ -27,6 +27,8 @@ Github：[releases](https://github.com/wanglin2/mind-map/releases)。

 > 客户端版本会落后于在线版本，尝试最新功能请优先使用在线版。

+> 如果访问github比较慢，可以使用：http://lxqnsys.com/simple-mind-map/#/index
+
 # 特性

 - [x] 插件化架构，除核心功能外，其他功能作为插件提供，按需使用，减小打包体积
@@ -86,7 +88,7 @@ const mindMap = new MindMap({

 # License

-[MIT](./LICENSE)
+请尽情享受开源：[MIT](./LICENSE)

 # 微信交流群

--- a/dist/js/chunk-2d0e2326.js
+++ b/dist/js/chunk-2d0e2326.js
--- a/dist/js/chunk-2d20f68f.js
+++ b/dist/js/chunk-2d20f68f.js
--- a/index.html
+++ b/index.html
@@ -1,7 +1,7 @@
 <!DOCTYPE html><html lang=""><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=1,maximum-scale=1,minimum-scale=1"><link rel="icon" href="dist/logo.ico"><title>思绪思维导图</title><script>// 自定义静态资源的路径
      window.externalPublicPath = './dist/'
      // 接管应用
-      window.takeOverApp = false</script><link href="dist/css/chunk-vendors.css?dc223b3a0a24b7dd7194" rel="stylesheet"><link href="dist/css/app.css?dc223b3a0a24b7dd7194" rel="stylesheet"></head><body><noscript><strong>We're sorry but thoughts doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><div id="app"></div><script>const getDataFromBackend = () => {
+      window.takeOverApp = false</script><link href="dist/css/chunk-vendors.css?21d0155a2ffb08384a8e" rel="stylesheet"><link href="dist/css/app.css?21d0155a2ffb08384a8e" rel="stylesheet"></head><body><noscript><strong>We're sorry but thoughts doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><div id="app"></div><script>const getDataFromBackend = () => {
        return new Promise((resolve, reject) => {
          setTimeout(() => {
            resolve({
@@ -66,4 +66,4 @@
        // 可以通过window.$bus.$on()来监听应用的一些事件
        // 实例化页面
        window.initApp()
-      }</script><script src="dist/js/chunk-vendors.js?dc223b3a0a24b7dd7194"></script><script src="dist/js/app.js?dc223b3a0a24b7dd7194"></script></body></html>
+      }</script><script src="dist/js/chunk-vendors.js?21d0155a2ffb08384a8e"></script><script src="dist/js/app.js?21d0155a2ffb08384a8e"></script></body></html>
--- a/web/src/pages/Doc/en/start/index.md
+++ b/web/src/pages/Doc/en/start/index.md
@@ -70,6 +70,14 @@ If you want to implement a complete mind map, you usually need to develop some U

 The non-packaged 'ES' module is introduced by default, and only contains core functions, not unregistered plugin content, which can effectively reduce the size. However, you need to configure the `babel` compilation `simple mind-map` in your project to prevent some newer `js` syntax some browsers not supporting it.

+If you don't want to load all plugins from the beginning and want to load and register plugins asynchronously after instantiation, you can do this:
+
+```js
+import('simple-mind-map/src/plugins/Export.js').then(res => {
+  mindMap.addPlugin(res.default)
+})
+```
+
 If you need a file in the format of `umd` module, such as `CDN` in the browser, Then you can find the `simpleMindMap.umd.min.js` file and `simpleMindMap.css` file in the `/simple-mind-map/dist/` directory, copy it to your project, and then import it into the page:

 ```html
@@ -83,6 +91,14 @@ The disadvantage of this method is that it will contain all the content, includi

 （v0.5.4+）If you want to use the `ES` module directly on the browser side, you can find the `simpleMindMap.esm.js` and `simpleMindMap.esm.css` files in the `/simple-mind-map/dist/` directory.

+Online CDN services can also be used, such as:
+
+```
+https://unpkg.com/browse/simple-mind-map@0.9.2/dist/
+```
+
+You can find all the packaged files for a certain version.
+
 ## Development

 If you only use library, you don't need to read this section.
@@ -102,6 +118,8 @@ npm link simple-mind-map
 npm run serve
 ```

+> If there is an installation dependency error, you can try adjusting the node version. The author is using version 14. x.
+
 ### Packaging the Library

 Since version `0.2.0`, we have added support for packaging the core library
@@ -128,6 +146,15 @@ Environments that support the `module` field will use `index.js` as the entry
 point, otherwise the packed `simpleMindMap.umd.min.js` will be used as the entry
 point.

+#### Generate TypeScript type files
+
+```bash
+cd simple-mind-map
+npm run types
+```
+
+You can obtain the type files in the 'simple-mind-map/types/' directory.
+
 ### Compile the doc

 ```bash
--- a/web/src/pages/Doc/en/start/index.vue
+++ b/web/src/pages/Doc/en/start/index.vue
@@ -53,6 +53,11 @@ compile this dependency:</p>
 <p>If you want to implement a complete mind map, you usually need to develop some UI interfaces to achieve more functions through the interfaces provided by the <code>simple-mind-map</code> library.</p>
 <p><code>simple-mind-map</code> supports rich configurations, events, commands, and some additional plugin extensions. Read the subsequent documentation to learn more.</p>
 <p>The non-packaged 'ES' module is introduced by default, and only contains core functions, not unregistered plugin content, which can effectively reduce the size. However, you need to configure the <code>babel</code> compilation <code>simple mind-map</code> in your project to prevent some newer <code>js</code> syntax some browsers not supporting it.</p>
+<p>If you don't want to load all plugins from the beginning and want to load and register plugins asynchronously after instantiation, you can do this:</p>
+<pre class="hljs"><code><span class="hljs-keyword">import</span>(<span class="hljs-string">&#x27;simple-mind-map/src/plugins/Export.js&#x27;</span>).then(<span class="hljs-function"><span class="hljs-params">res</span> =&gt;</span> {
+  mindMap.addPlugin(res.default)
+})
+</code></pre>
 <p>If you need a file in the format of <code>umd</code> module, such as <code>CDN</code> in the browser, Then you can find the <code>simpleMindMap.umd.min.js</code> file and <code>simpleMindMap.css</code> file in the <code>/simple-mind-map/dist/</code> directory, copy it to your project, and then import it into the page:</p>
 <pre class="hljs"><code><span class="hljs-tag">&lt;<span class="hljs-name">link</span> <span class="hljs-attr">rel</span>=<span class="hljs-string">&quot;stylesheet&quot;</span> <span class="hljs-attr">href</span>=<span class="hljs-string">&quot;simpleMindMap.css&quot;</span>&gt;</span>
 <span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">scr</span>=<span class="hljs-string">&quot;simpleMindMap.umd.min.js&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span>
@@ -60,6 +65,10 @@ compile this dependency:</p>
 <p>A global variable <code>window.simpleMindMap</code> will be created. you can get <code>MindMap</code> constructor by <code>window.simpleMindMap.default</code>, for more detail info you can log <code>window.simpleMindMap</code>.</p>
 <p>The disadvantage of this method is that it will contain all the content, including the plugins you have not registered, so the overall volume will be relatively large.</p>
 <p>（v0.5.4+）If you want to use the <code>ES</code> module directly on the browser side, you can find the <code>simpleMindMap.esm.js</code> and <code>simpleMindMap.esm.css</code> files in the <code>/simple-mind-map/dist/</code> directory.</p>
+<p>Online CDN services can also be used, such as:</p>
+<pre class="hljs"><code>https://unpkg.com/browse/simple-mind-map@0.9.2/dist/
+</code></pre>
+<p>You can find all the packaged files for a certain version.</p>
 <h2>Development</h2>
 <p>If you only use library, you don't need to read this section.</p>
 <h3>Local Development</h3>
@@ -74,6 +83,9 @@ npm i
 npm link simple-mind-map
 npm run serve
 </code></pre>
+<blockquote>
+<p>If there is an installation dependency error, you can try adjusting the node version. The author is using version 14. x.</p>
+</blockquote>
 <h3>Packaging the Library</h3>
 <p>Since version <code>0.2.0</code>, we have added support for packaging the core library
 simple-mind-map. This uses the same packaging tool as the sample project web.</p>
@@ -91,6 +103,11 @@ fields:</p>
 <p>Environments that support the <code>module</code> field will use <code>index.js</code> as the entry
 point, otherwise the packed <code>simpleMindMap.umd.min.js</code> will be used as the entry
 point.</p>
+<h4>Generate TypeScript type files</h4>
+<pre class="hljs"><code><span class="hljs-built_in">cd</span> simple-mind-map
+npm run types
+</code></pre>
+<p>You can obtain the type files in the 'simple-mind-map/types/' directory.</p>
 <h3>Compile the doc</h3>
 <pre class="hljs"><code><span class="hljs-built_in">cd</span> web 
 npm run buildDoc
--- a/web/src/pages/Doc/zh/start/index.md
+++ b/web/src/pages/Doc/zh/start/index.md
@@ -65,6 +65,14 @@ const mindMap = new MindMap({

 默认引入的是未打包的`ES`模块，且只包含核心功能，不包含未注册的插件内容，能有效减小体积，不过你需要在你的项目中配置`babel`编译`simple-mind-map`，防止一些较新的`js`语法部分浏览器不支持。

+如果你不想一开始就加载所有插件，想在实例化了之后再异步加载和注册插件，可以这么做：
+
+```js
+import('simple-mind-map/src/plugins/Export.js').then(res => {
+  mindMap.addPlugin(res.default)
+})
+```
+
 如果你需要`umd`模块格式的文件，比如以`CDN`的方式在浏览器上使用，那么你可以从`/simple-mind-map/dist/`目录中找到`simpleMindMap.umd.min.js`文件和`simpleMindMap.css`文件，复制到你的项目中，然后在页面中引入：

 ```html
@@ -78,6 +86,14 @@ const mindMap = new MindMap({

 （v0.5.4+）如果你想直接在浏览器端通过`ES`模块的方式来使用，你可以在`/simple-mind-map/dist/`目录中找到`simpleMindMap.esm.js`和`simpleMindMap.esm.css`文件。

+也可以使用在线cdn服务，比如：
+
+```
+https://unpkg.com/browse/simple-mind-map@0.9.2/dist/
+```
+
+可以找到某个版本的所有打包后的文件。
+
 ## 开发

 如果你只是使用库的话可以不用阅读此小节。
@@ -97,6 +113,8 @@ npm link simple-mind-map
 npm run serve
 ```

+> 如果安装依赖出错，可以尝试调整node版本，作者使用的是14.x版本。
+
 ### 打包库

 自`0.2.0`版本开始增加了对核心库`simple-mind-map`的打包，复用了示例项目`web`的打包工具。
@@ -119,6 +137,15 @@ npm run buildLibrary

 支持`module`字段的环境会以`index.js`为入口，否则会以打包后的`simpleMindMap.umd.min.js`为入口。

+#### 生成TypeScript类型文件
+
+```bash
+cd simple-mind-map
+npm run types
+```
+
+即可得到`simple-mind-map/types/`目录下的类型文件。
+
 ### 编译文档

 ```bash
--- a/web/src/pages/Doc/zh/start/index.vue
+++ b/web/src/pages/Doc/zh/start/index.vue
@@ -47,6 +47,11 @@
 <p>如果你想要实现一个完整思维导图，那么通常你需要开发一些ui界面，通过<code>simple-mind-map</code>库提供的接口来实现更多功能。</p>
 <p><code>simple-mind-map</code>支持丰富的配置、事件、命令，以及一些额外的插件扩展，阅读后续的文档来了解更多吧。</p>
 <p>默认引入的是未打包的<code>ES</code>模块，且只包含核心功能，不包含未注册的插件内容，能有效减小体积，不过你需要在你的项目中配置<code>babel</code>编译<code>simple-mind-map</code>，防止一些较新的<code>js</code>语法部分浏览器不支持。</p>
+<p>如果你不想一开始就加载所有插件，想在实例化了之后再异步加载和注册插件，可以这么做：</p>
+<pre class="hljs"><code><span class="hljs-keyword">import</span>(<span class="hljs-string">&#x27;simple-mind-map/src/plugins/Export.js&#x27;</span>).then(<span class="hljs-function"><span class="hljs-params">res</span> =&gt;</span> {
+  mindMap.addPlugin(res.default)
+})
+</code></pre>
 <p>如果你需要<code>umd</code>模块格式的文件，比如以<code>CDN</code>的方式在浏览器上使用，那么你可以从<code>/simple-mind-map/dist/</code>目录中找到<code>simpleMindMap.umd.min.js</code>文件和<code>simpleMindMap.css</code>文件，复制到你的项目中，然后在页面中引入：</p>
 <pre class="hljs"><code><span class="hljs-tag">&lt;<span class="hljs-name">link</span> <span class="hljs-attr">rel</span>=<span class="hljs-string">&quot;stylesheet&quot;</span> <span class="hljs-attr">href</span>=<span class="hljs-string">&quot;simpleMindMap.css&quot;</span>&gt;</span>
 <span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">scr</span>=<span class="hljs-string">&quot;simpleMindMap.umd.min.js&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span>
@@ -54,6 +59,10 @@
 <p>会创建一个全局变量<code>window.simpleMindMap</code>，可以通过<code>window.simpleMindMap.default</code>获取到<code>MindMap</code>构造函数，详细信息可以把<code>window.simpleMindMap</code>打印出来看一下。</p>
 <p>这种方式的缺点是会包含所有的内容，包括你没有注册的插件，所以整体体积会比较大。</p>
 <p>（v0.5.4+）如果你想直接在浏览器端通过<code>ES</code>模块的方式来使用，你可以在<code>/simple-mind-map/dist/</code>目录中找到<code>simpleMindMap.esm.js</code>和<code>simpleMindMap.esm.css</code>文件。</p>
+<p>也可以使用在线cdn服务，比如：</p>
+<pre class="hljs"><code>https://unpkg.com/browse/simple-mind-map@0.9.2/dist/
+</code></pre>
+<p>可以找到某个版本的所有打包后的文件。</p>
 <h2>开发</h2>
 <p>如果你只是使用库的话可以不用阅读此小节。</p>
 <h3>本地开发</h3>
@@ -68,6 +77,9 @@ npm i
 npm link simple-mind-map
 npm run serve
 </code></pre>
+<blockquote>
+<p>如果安装依赖出错，可以尝试调整node版本，作者使用的是14.x版本。</p>
+</blockquote>
 <h3>打包库</h3>
 <p>自<code>0.2.0</code>版本开始增加了对核心库<code>simple-mind-map</code>的打包，复用了示例项目<code>web</code>的打包工具。</p>
 <pre class="hljs"><code><span class="hljs-built_in">cd</span> web
@@ -81,6 +93,11 @@ npm run buildLibrary
 }
 </code></pre>
 <p>支持<code>module</code>字段的环境会以<code>index.js</code>为入口，否则会以打包后的<code>simpleMindMap.umd.min.js</code>为入口。</p>
+<h4>生成TypeScript类型文件</h4>
+<pre class="hljs"><code><span class="hljs-built_in">cd</span> simple-mind-map
+npm run types
+</code></pre>
+<p>即可得到<code>simple-mind-map/types/</code>目录下的类型文件。</p>
 <h3>编译文档</h3>
 <pre class="hljs"><code><span class="hljs-built_in">cd</span> web 
 npm run buildDoc