Start
+
Installation
+
+Things to note before version 0.2.0:
+
+
npm i simple-mind-map
+
+
0.2.0 Notes for previous versions:
+
+Note: This project is directly published in source code form and has not been
+packaged. If compilation fails, a Vue CLI-created project can add the
+following configuration to the vue.config.js file to allow babel-loader to
+compile this dependency:
+module.exports = {
+ transpileDependencies: ["simple-mind-map"],
+};
+
+Other projects should modify the packaging configuration as needed.
+
+
Usage
+
+The web directory of this repository provides a complete project based on Vue2. If you encounter any doubts about using it, you can refer to the implementation of this project.
+
+
+To learn about its use in other frameworks, you can refer to the following unofficial implementations:
+1.https://github.com/huangyuanyin/hyy-vue3-mindMap: A mind map based on Vue3.2+ElementPlus.
+
+
Firstly, provide a container element with a width and height not equal to 0:
+
<div id="mindMapContainer"></div>
+
+
Then introduce the simple-mind-map library and create an instance:
+
import MindMap from "simple-mind-map";
+
+const mindMap = new MindMap({
+ el: document.getElementById('mindMapContainer'),
+ data: {
+ "data": {
+ "text": "Root Node"
+ },
+ "children": []
+ }
+});
+
+
This will result in a mind map.
+
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 simple-mind-map library.
+
simple-mind-map supports rich configurations, events, commands, and some additional plugin extensions. Read the subsequent documentation to learn more.
+
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 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 in the /simple-mind-map/dist/ directory, copy it to your project, and then import it into the page:
+
<script scr="simpleMindMap.umd.min.js"></script>
+
+
A global variable window.simpleMindMap will be created.
+
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.
Development
+
If you only use library, you don't need to read this section.
Local Development
git clone https://github.com/wanglin2/mind-map.git
cd simple-mind-map
@@ -38,48 +90,6 @@ npm run buildDoc
npm run build
The index.html file will be automatically moved to the root directory.
-
Installation
-
-Things to note before version 0.2.0:
-
-
npm i simple-mind-map
-
-
0.2.0 Notes for previous versions:
-
-Note: This project is directly published in source code form and has not been
-packaged. If compilation fails, a Vue CLI-created project can add the
-following configuration to the vue.config.js file to allow babel-loader to
-compile this dependency:
-module.exports = {
- transpileDependencies: ["simple-mind-map"],
-};
-
-Other projects should modify the packaging configuration as needed.
-
-
Usage
-
-The web directory of this repository provides a complete project based on Vue2. If you encounter any doubts about using it, you can refer to the implementation of this project.
-
-
<div id="mindMapContainer"></div>
-
-
import MindMap from "simple-mind-map";
-
-const mindMap = new MindMap({
- el: document.getElementById('mindMapContainer'),
- data: {
- "data": {
- "text": "Root Node"
- },
- "children": []
- }
-});
-
-
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 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 in the /simple-mind-map/dist/ directory, copy it to your project, and then import it into the page:
-
<script scr="simpleMindMap.umd.min.js"></script>
-
-
A global variable window.simpleMindMap will be created.
-
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.
Problems
Error when using in Vite, indicating xml-js dependency error
Solution: use the following import method:
diff --git a/web/src/pages/Doc/zh/introduction/index.md b/web/src/pages/Doc/zh/introduction/index.md
index c2f22e22..d2e5eca9 100644
--- a/web/src/pages/Doc/zh/introduction/index.md
+++ b/web/src/pages/Doc/zh/introduction/index.md
@@ -2,6 +2,8 @@
`simple-mind-map`是一个简单&强大的Web思维导图库，不依赖任何特定框架。可以帮助你快速开发思维导图产品。
+> 如果你只是想使用思维导图，你也完全可以把本项目的demo作为一个普通的在线思维导图工具使用。点击右上角的【在线示例】开始使用吧。
+
## 特性
- [x] 插件化架构，除核心功能外，其他功能作为插件提供，按需使用，减小整体体积
@@ -68,4 +70,14 @@
## License
-[MIT](https://opensource.org/licenses/MIT)
\ No newline at end of file
+[MIT](https://opensource.org/licenses/MIT)
+
+## 请作者喝杯咖啡
+
+开源不易，如果本项目有帮助到你的话，可以请作者喝杯咖啡哟~
+
+> 转账请备注【思维导图】。你的头像和名字将会出现在下面。
+
+
+
+
\ No newline at end of file
diff --git a/web/src/pages/Doc/zh/introduction/index.vue b/web/src/pages/Doc/zh/introduction/index.vue
index efaad664..e3415b59 100644
--- a/web/src/pages/Doc/zh/introduction/index.vue
+++ b/web/src/pages/Doc/zh/introduction/index.vue
@@ -2,21 +2,24 @@
简介
simple-mind-map是一个简单&强大的Web思维导图库，不依赖任何特定框架。可以帮助你快速开发思维导图产品。
+
+如果你只是想使用思维导图，你也完全可以把本项目的demo作为一个普通的在线思维导图工具使用。点击右上角的【在线示例】开始使用吧。
+
特性
仓库目录介绍
1.simple-mind-map
@@ -24,11 +27,11 @@
2.web
使用simple-mind-map库，基于vue2.x、ElementUI搭建的在线思维导图。特性：
提供文档页面服务。
3.dist
@@ -48,7 +51,13 @@
尊重版权，主题和图标请勿直接用于商业项目。
License
MIT
-
+
请作者喝杯咖啡
+
开源不易，如果本项目有帮助到你的话，可以请作者喝杯咖啡哟~
+
+转账请备注【思维导图】。你的头像和名字将会出现在下面。
+
+
+
diff --git a/web/src/pages/Doc/zh/start/index.md b/web/src/pages/Doc/zh/start/index.md
index 30ef4e0e..5b314a19 100644
--- a/web/src/pages/Doc/zh/start/index.md
+++ b/web/src/pages/Doc/zh/start/index.md
@@ -1,7 +1,75 @@
# 开始
+## 安装
+
+```bash
+npm i simple-mind-map
+```
+
+`0.2.0`版本之前的注意事项：
+
+> 注意：本项目为源码直接发布，并未进行打包，如果出现编译失败的情况，Vue CLI创建的项目可以在vue.config.js文件中增加如下配置来让babel-loader编译本依赖：
+>
+> ```js
+> module.exports = {
+> transpileDependencies: ['simple-mind-map']
+> }
+> ```
+>
+> 其他项目请自行修改打包配置。
+
+## 使用
+
+> 本仓库的`web`目录提供了一个基于`Vue2`的完整项目，如果你遇到了一些使用上的疑惑，可以参考该项目的实现。
+
+> 想要了解在其他框架中的使用，你可以参考以下这些非官方的实现：
+>
+> 1.[https://github.com/huangyuanyin/hyy-vue3-mindMap](https://github.com/huangyuanyin/hyy-vue3-mindMap)：一个基于 Vue3.2 +ElementPlus的思维导图。
+
+首先提供一个宽高不为0的容器元素：
+
+```html
+
+```
+
+然后引入`simple-mind-map`库，创建一个实例：
+
+```js
+import MindMap from "simple-mind-map";
+
+const mindMap = new MindMap({
+ el: document.getElementById('mindMapContainer'),
+ data: {
+ "data": {
+ "text": "根节点"
+ },
+ "children": []
+ }
+});
+```
+
+这样即可得一个思维导图。
+
+如果你想要实现一个完整思维导图，那么通常你需要开发一些ui界面，通过`simple-mind-map`库提供的接口来实现更多功能。
+
+`simple-mind-map`支持丰富的配置、事件、命令，以及一些额外的插件扩展，阅读后续的文档来了解更多吧。
+
+默认引入的是未打包的`ES`模块，且只包含核心功能，不包含未注册的插件内容，能有效减小体积，不过你需要在你的项目中配置`babel`编译`simple-mind-map`，防止一些较新的`js`语法部分浏览器不支持。
+
+如果你需要`umd`模块格式的文件，比如以`CDN`的方式在浏览器上使用，那么你可以从`/simple-mind-map/dist/`目录中找到`simpleMindMap.umd.min.js`文件，复制到你的项目中，然后在页面中引入：
+
+```html
+
+```
+
+会创建一个全局变量`window.simpleMindMap`。
+
+这种方式的缺点是会包含所有的内容，包括你没有注册的插件，所以整体体积会比较大。
+
## 开发
+如果你只是使用库的话可以不用阅读此小节。
+
### 本地开发
```bash
@@ -52,58 +120,6 @@ npm run build
会自动把`index.html`移动到根目录。
-## 安装
-
-```bash
-npm i simple-mind-map
-```
-
-`0.2.0`版本之前的注意事项：
-
-> 注意：本项目为源码直接发布，并未进行打包，如果出现编译失败的情况，Vue CLI创建的项目可以在vue.config.js文件中增加如下配置来让babel-loader编译本依赖：
->
-> ```js
-> module.exports = {
-> transpileDependencies: ['simple-mind-map']
-> }
-> ```
->
-> 其他项目请自行修改打包配置。
-
-## 使用
-
-> 本仓库的`web`目录提供了一个基于`Vue2`的完整项目，如果你遇到了一些使用上的疑惑，可以参考该项目的实现。
-
-```html
-
-```
-
-```js
-import MindMap from "simple-mind-map";
-
-const mindMap = new MindMap({
- el: document.getElementById('mindMapContainer'),
- data: {
- "data": {
- "text": "根节点"
- },
- "children": []
- }
-});
-```
-
-默认引入的是未打包的`ES`模块，且只包含核心功能，不包含未注册的插件内容，能有效减小体积，不过你需要在你的项目中配置`babel`编译`simple-mind-map`，防止一些较新的`js`语法部分浏览器不支持。
-
-如果你需要`umd`模块格式的文件，比如以`CDN`的方式在浏览器上使用，那么你可以从`/simple-mind-map/dist/`目录中找到`simpleMindMap.umd.min.js`文件，复制到你的项目中，然后在页面中引入：
-
-```html
-
-```
-
-会创建一个全局变量`window.simpleMindMap`。
-
-这种方式的缺点是会包含所有的内容，包括你没有注册的插件，所以整体体积会比较大。
-
## 问题
### 1.在Vite中使用报错，提示xml-js依赖出错
diff --git a/web/src/pages/Doc/zh/start/index.vue b/web/src/pages/Doc/zh/start/index.vue
index fa8eb70c..5cff9176 100644
--- a/web/src/pages/Doc/zh/start/index.vue
+++ b/web/src/pages/Doc/zh/start/index.vue
@@ -1,7 +1,53 @@
开始
+
安装
+
npm i simple-mind-map
+
+
0.2.0版本之前的注意事项：
+
+注意：本项目为源码直接发布，并未进行打包，如果出现编译失败的情况，Vue CLI创建的项目可以在vue.config.js文件中增加如下配置来让babel-loader编译本依赖：
+module.exports = {
+ transpileDependencies: ['simple-mind-map']
+}
+
+其他项目请自行修改打包配置。
+
+
使用
+
+本仓库的web目录提供了一个基于Vue2的完整项目，如果你遇到了一些使用上的疑惑，可以参考该项目的实现。
+
+
+想要了解在其他框架中的使用，你可以参考以下这些非官方的实现：
+1.https://github.com/huangyuanyin/hyy-vue3-mindMap：一个基于 Vue3.2 +ElementPlus的思维导图。
+
+
首先提供一个宽高不为0的容器元素：
+
<div id="mindMapContainer"></div>
+
+
然后引入simple-mind-map库，创建一个实例：
+
import MindMap from "simple-mind-map";
+
+const mindMap = new MindMap({
+ el: document.getElementById('mindMapContainer'),
+ data: {
+ "data": {
+ "text": "根节点"
+ },
+ "children": []
+ }
+});
+
+
这样即可得一个思维导图。
+
如果你想要实现一个完整思维导图，那么通常你需要开发一些ui界面，通过simple-mind-map库提供的接口来实现更多功能。
+
simple-mind-map支持丰富的配置、事件、命令，以及一些额外的插件扩展，阅读后续的文档来了解更多吧。
+
默认引入的是未打包的ES模块，且只包含核心功能，不包含未注册的插件内容，能有效减小体积，不过你需要在你的项目中配置babel编译simple-mind-map，防止一些较新的js语法部分浏览器不支持。
+
如果你需要umd模块格式的文件，比如以CDN的方式在浏览器上使用，那么你可以从/simple-mind-map/dist/目录中找到simpleMindMap.umd.min.js文件，复制到你的项目中，然后在页面中引入：
+
<script scr="simpleMindMap.umd.min.js"></script>
+
+
会创建一个全局变量window.simpleMindMap。
+
这种方式的缺点是会包含所有的内容，包括你没有注册的插件，所以整体体积会比较大。
开发
+
如果你只是使用库的话可以不用阅读此小节。
本地开发
git clone https://github.com/wanglin2/mind-map.git
cd simple-mind-map
@@ -34,42 +80,6 @@ npm run buildDoc
npm run build
会自动把index.html移动到根目录。
-
安装
-
npm i simple-mind-map
-
-
0.2.0版本之前的注意事项：
-
-注意：本项目为源码直接发布，并未进行打包，如果出现编译失败的情况，Vue CLI创建的项目可以在vue.config.js文件中增加如下配置来让babel-loader编译本依赖：
-module.exports = {
- transpileDependencies: ['simple-mind-map']
-}
-
-其他项目请自行修改打包配置。
-
-
使用
-
-本仓库的web目录提供了一个基于Vue2的完整项目，如果你遇到了一些使用上的疑惑，可以参考该项目的实现。
-
-
<div id="mindMapContainer"></div>
-
-
import MindMap from "simple-mind-map";
-
-const mindMap = new MindMap({
- el: document.getElementById('mindMapContainer'),
- data: {
- "data": {
- "text": "根节点"
- },
- "children": []
- }
-});
-
-
默认引入的是未打包的ES模块，且只包含核心功能，不包含未注册的插件内容，能有效减小体积，不过你需要在你的项目中配置babel编译simple-mind-map，防止一些较新的js语法部分浏览器不支持。
-
如果你需要umd模块格式的文件，比如以CDN的方式在浏览器上使用，那么你可以从/simple-mind-map/dist/目录中找到simpleMindMap.umd.min.js文件，复制到你的项目中，然后在页面中引入：
-
<script scr="simpleMindMap.umd.min.js"></script>
-
-
会创建一个全局变量window.simpleMindMap。
-
这种方式的缺点是会包含所有的内容，包括你没有注册的插件，所以整体体积会比较大。
问题
1.在Vite中使用报错，提示xml-js依赖出错
解决方法：使用如下引入方式：