mirror of https://gitee.com/godoos/godoos.git
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
1 lines
13 KiB
1 lines
13 KiB
(window["webpackJsonp"]=window["webpackJsonp"]||[]).push([["chunk-2d0e2326"],{"7e57":function(s,a,t){"use strict";t.r(a);var n=function(){var s=this;s._self._c;return s._m(0)},i=[function(){var s=this,a=s._self._c;return a("div",[a("h1",[s._v("开始")]),a("h2",[s._v("安装")]),a("pre",{staticClass:"hljs"},[a("code",[s._v("npm i simple-mind-map\n")])]),a("p",[a("code",[s._v("0.2.0")]),s._v("版本之前的注意事项:")]),a("blockquote",[a("p",[s._v("注意:本项目为源码直接发布,并未进行打包,如果出现编译失败的情况,Vue CLI创建的项目可以在vue.config.js文件中增加如下配置来让babel-loader编译本依赖:")]),a("pre",{staticClass:"hljs"},[a("code",[a("span",{staticClass:"hljs-built_in"},[s._v("module")]),s._v(".exports = {\n "),a("span",{staticClass:"hljs-attr"},[s._v("transpileDependencies")]),s._v(": ["),a("span",{staticClass:"hljs-string"},[s._v("'simple-mind-map'")]),s._v("]\n}\n")])]),a("p",[s._v("其他项目请自行修改打包配置。")])]),a("h2",[s._v("使用")]),a("blockquote",[a("p",[s._v("本仓库的"),a("code",[s._v("web")]),s._v("目录提供了一个基于"),a("code",[s._v("Vue2")]),s._v("的完整项目,如果你遇到了一些使用上的疑惑,可以参考该项目的实现。")])]),a("blockquote",[a("p",[s._v("想要了解在其他框架中的使用,你可以参考以下这些非官方的实现:")]),a("p",[s._v("1."),a("a",{attrs:{href:"https://github.com/huangyuanyin/hyy-vue3-mindMap"}},[s._v("https://github.com/huangyuanyin/hyy-vue3-mindMap")]),s._v(":一个基于 Vue3.2 +ElementPlus的思维导图。")])]),a("p",[s._v("首先提供一个宽高不为0的容器元素:")]),a("pre",{staticClass:"hljs"},[a("code",[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("id")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"mindMapContainer"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n")])]),a("p",[s._v("另外再设置一下"),a("code",[s._v("css")]),s._v("样式:")]),a("pre",{staticClass:"hljs"},[a("code",[a("span",{staticClass:"hljs-selector-id"},[s._v("#mindMapContainer")]),s._v(" * {\n "),a("span",{staticClass:"hljs-attribute"},[s._v("margin")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("0")]),s._v(";\n "),a("span",{staticClass:"hljs-attribute"},[s._v("padding")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("0")]),s._v(";\n}\n")])]),a("p",[s._v("然后引入"),a("code",[s._v("simple-mind-map")]),s._v("库,创建一个实例:")]),a("pre",{staticClass:"hljs"},[a("code",[a("span",{staticClass:"hljs-keyword"},[s._v("import")]),s._v(" MindMap "),a("span",{staticClass:"hljs-keyword"},[s._v("from")]),s._v(" "),a("span",{staticClass:"hljs-string"},[s._v('"simple-mind-map"')]),s._v(";\n\n"),a("span",{staticClass:"hljs-keyword"},[s._v("const")]),s._v(" mindMap = "),a("span",{staticClass:"hljs-keyword"},[s._v("new")]),s._v(" MindMap({\n "),a("span",{staticClass:"hljs-attr"},[s._v("el")]),s._v(": "),a("span",{staticClass:"hljs-built_in"},[s._v("document")]),s._v(".getElementById("),a("span",{staticClass:"hljs-string"},[s._v("'mindMapContainer'")]),s._v("),\n "),a("span",{staticClass:"hljs-attr"},[s._v("data")]),s._v(": {\n "),a("span",{staticClass:"hljs-string"},[s._v('"data"')]),s._v(": {\n "),a("span",{staticClass:"hljs-string"},[s._v('"text"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"根节点"')]),s._v("\n },\n "),a("span",{staticClass:"hljs-string"},[s._v('"children"')]),s._v(": []\n }\n});\n")])]),a("p",[s._v("这样即可得一个思维导图。")]),a("p",[s._v("如果你想要实现一个完整思维导图,那么通常你需要开发一些ui界面,通过"),a("code",[s._v("simple-mind-map")]),s._v("库提供的接口来实现更多功能。")]),a("p",[a("code",[s._v("simple-mind-map")]),s._v("支持丰富的配置、事件、命令,以及一些额外的插件扩展,阅读后续的文档来了解更多吧。")]),a("p",[s._v("默认引入的是未打包的"),a("code",[s._v("ES")]),s._v("模块,且只包含核心功能,不包含未注册的插件内容,能有效减小体积,不过你需要在你的项目中配置"),a("code",[s._v("babel")]),s._v("编译"),a("code",[s._v("simple-mind-map")]),s._v(",防止一些较新的"),a("code",[s._v("js")]),s._v("语法部分浏览器不支持。")]),a("p",[s._v("如果你不想一开始就加载所有插件,想在实例化了之后再异步加载和注册插件,可以这么做:")]),a("pre",{staticClass:"hljs"},[a("code",[a("span",{staticClass:"hljs-keyword"},[s._v("import")]),s._v("("),a("span",{staticClass:"hljs-string"},[s._v("'simple-mind-map/src/plugins/Export.js'")]),s._v(").then("),a("span",{staticClass:"hljs-function"},[a("span",{staticClass:"hljs-params"},[s._v("res")]),s._v(" =>")]),s._v(" {\n mindMap.addPlugin(res.default)\n})\n")])]),a("p",[s._v("如果你需要"),a("code",[s._v("umd")]),s._v("模块格式的文件,比如以"),a("code",[s._v("CDN")]),s._v("的方式在浏览器上使用,那么你可以从"),a("code",[s._v("/simple-mind-map/dist/")]),s._v("目录中找到"),a("code",[s._v("simpleMindMap.umd.min.js")]),s._v("文件和"),a("code",[s._v("simpleMindMap.css")]),s._v("文件,复制到你的项目中,然后在页面中引入:")]),a("pre",{staticClass:"hljs"},[a("code",[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("link")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("rel")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"stylesheet"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("href")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"simpleMindMap.css"')]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("scr")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"simpleMindMap.umd.min.js"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])]),a("p",[s._v("会创建一个全局变量"),a("code",[s._v("window.simpleMindMap")]),s._v(",可以通过"),a("code",[s._v("window.simpleMindMap.default")]),s._v("获取到"),a("code",[s._v("MindMap")]),s._v("构造函数,详细信息可以把"),a("code",[s._v("window.simpleMindMap")]),s._v("打印出来看一下。")]),a("p",[s._v("这种方式的缺点是会包含所有的内容,包括你没有注册的插件,所以整体体积会比较大。")]),a("p",[s._v("(v0.5.4+)如果你想直接在浏览器端通过"),a("code",[s._v("ES")]),s._v("模块的方式来使用,你可以在"),a("code",[s._v("/simple-mind-map/dist/")]),s._v("目录中找到"),a("code",[s._v("simpleMindMap.esm.js")]),s._v("和"),a("code",[s._v("simpleMindMap.esm.css")]),s._v("文件。")]),a("p",[s._v("也可以使用在线cdn服务,比如:")]),a("pre",{staticClass:"hljs"},[a("code",[s._v("https://unpkg.com/browse/simple-mind-map@0.9.2/dist/\n")])]),a("p",[s._v("可以找到某个版本的所有打包后的文件。")]),a("h2",[s._v("开发")]),a("p",[s._v("如果你只是使用库的话可以不用阅读此小节。")]),a("h3",[s._v("本地开发")]),a("pre",{staticClass:"hljs"},[a("code",[s._v("git "),a("span",{staticClass:"hljs-built_in"},[s._v("clone")]),s._v(" https://github.com/wanglin2/mind-map.git\n"),a("span",{staticClass:"hljs-built_in"},[s._v("cd")]),s._v(" mind-map\n"),a("span",{staticClass:"hljs-built_in"},[s._v("cd")]),s._v(" simple-mind-map\nnpm i\nnpm link\n"),a("span",{staticClass:"hljs-built_in"},[s._v("cd")]),s._v(" ..\n"),a("span",{staticClass:"hljs-built_in"},[s._v("cd")]),s._v(" web\nnpm i\nnpm link simple-mind-map\nnpm run serve\n")])]),a("blockquote",[a("p",[s._v("如果安装依赖出错,可以尝试调整node版本,作者使用的是14.x版本。")])]),a("h3",[s._v("打包库")]),a("p",[s._v("自"),a("code",[s._v("0.2.0")]),s._v("版本开始增加了对核心库"),a("code",[s._v("simple-mind-map")]),s._v("的打包,复用了示例项目"),a("code",[s._v("web")]),s._v("的打包工具。")]),a("pre",{staticClass:"hljs"},[a("code",[a("span",{staticClass:"hljs-built_in"},[s._v("cd")]),s._v(" web\nnpm run buildLibrary\n")])]),a("p",[s._v("打包入口为"),a("code",[s._v("simple-mind-map/full.js")]),s._v(",默认会引入所有插件,如果你不需要所有插件的话,那么可以修改该文件,只引入你需要的插件,这样可以减少打包后的文件体积。")]),a("p",[a("code",[s._v("simple-mind-map")]),s._v("库的"),a("code",[s._v("package.json")]),s._v("文件提供了两个导出字段:")]),a("pre",{staticClass:"hljs"},[a("code",[s._v("{\n "),a("span",{staticClass:"hljs-attr"},[s._v('"module"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"index.js"')]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v('"main"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"./dist/simpleMindMap.umd.min.js"')]),s._v(",\n}\n")])]),a("p",[s._v("支持"),a("code",[s._v("module")]),s._v("字段的环境会以"),a("code",[s._v("index.js")]),s._v("为入口,否则会以打包后的"),a("code",[s._v("simpleMindMap.umd.min.js")]),s._v("为入口。")]),a("h4",[s._v("生成TypeScript类型文件")]),a("pre",{staticClass:"hljs"},[a("code",[a("span",{staticClass:"hljs-built_in"},[s._v("cd")]),s._v(" simple-mind-map\nnpm run types\n")])]),a("p",[s._v("即可得到"),a("code",[s._v("simple-mind-map/types/")]),s._v("目录下的类型文件。")]),a("h3",[s._v("编译文档")]),a("pre",{staticClass:"hljs"},[a("code",[a("span",{staticClass:"hljs-built_in"},[s._v("cd")]),s._v(" web \nnpm run buildDoc\n")])]),a("h3",[s._v("打包demo")]),a("pre",{staticClass:"hljs"},[a("code",[a("span",{staticClass:"hljs-built_in"},[s._v("cd")]),s._v(" web\nnpm run build\n")])]),a("p",[s._v("会自动把"),a("code",[s._v("index.html")]),s._v("移动到根目录。")]),a("h2",[s._v("问题")]),a("h3",[s._v("1.在Vite中使用报错,提示xml-js依赖出错")]),a("p",[s._v("解决方法:使用如下引入方式:")]),a("pre",{staticClass:"hljs"},[a("code",[a("span",{staticClass:"hljs-keyword"},[s._v("import")]),s._v(" MindMap "),a("span",{staticClass:"hljs-keyword"},[s._v("from")]),s._v(" "),a("span",{staticClass:"hljs-string"},[s._v('"simple-mind-map/dist/simpleMindMap.umd.min"')]),s._v("\n")])]),a("p",[a("code",[s._v("simple-mind-map")]),s._v("包提供未打包的入口字段"),a("code",[s._v("module")]),s._v(",依赖的"),a("code",[s._v("xml-js")]),s._v("包需要引入"),a("code",[s._v("node")]),s._v("环境下的包,所以在"),a("code",[s._v("Vite")]),s._v("中获取不到会报错,所以指定引入打包后的入口,相关包都已打包进产物,所以不会报错。")]),a("p",[s._v("如果需要二次开发,也就是必须要使用未打包代码的话,如果你不需要解析"),a("code",[s._v("xmind")]),s._v("文件的话,可以去除"),a("code",[s._v("xmind")]),s._v("模块,如果需要的话那么可以尝试换成其他的解析"),a("code",[s._v("xml")]),s._v("为"),a("code",[s._v("json")]),s._v("的库。")]),a("h3",[s._v("2.报错"),a("code",[s._v("Getting bbox of element \"text\" is not possible: TypeError: Cannot read properties of undefined (reading 'apply')")])]),a("p",[s._v("原因为安装的"),a("code",[s._v("@svgdotjs/svg.js")]),s._v("版本太高,手动降到"),a("code",[s._v("3.0.16")]),s._v("版本即可。")]),a("h3",[s._v("3.TypeError: Cannot read properties of undefined (reading 'prototype') at sax.js:222:46")]),a("p",[s._v("可以在打包配置文件中增加如下配置:")]),a("pre",{staticClass:"hljs"},[a("code",[s._v("resolve: { "),a("span",{staticClass:"hljs-attr"},[s._v("alias")]),s._v(": { "),a("span",{staticClass:"hljs-attr"},[s._v("stream")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"stream-browserify"')]),s._v(" } }\n")])]),a("p",[s._v("不同的打包工具可能具体配置不一样,原理就是排除"),a("code",[s._v("stream")]),s._v("依赖。")]),a("h3",[s._v("4.点击【新建】、【打开】、【另存为】按钮时提示浏览器不支持,或者非https协议。")]),a("p",[s._v("浏览器上操作电脑本地文件使用的是"),a("a",{attrs:{href:"https://developer.mozilla.org/zh-CN/docs/Web/API/Window/showOpenFilePicker"}},[s._v("window.showOpenFilePicker")]),s._v("api,如果不支持,要么是浏览器不支持这个API,要么是因为页面非https协议,你可以按F12,或者在页面通过鼠标右键菜单中的【检查】打开浏览器控制台,在其中的【控制台】或【console】tab中输入"),a("code",[s._v("window.showOpenFilePicker")]),s._v("按回车,如果返回"),a("code",[s._v("undefined")]),s._v("则代表不支持,如果返回的不是这个,而页面依旧提示提示浏览器不支持,或者非https协议,那么可以提交issue,或者联系作者。")])])}],_={},v=_,e=t("2877"),l=Object(e["a"])(v,n,i,!1,null,null,null);a["default"]=l.exports}}]);
|