封装一个vue-mindeditor组件安装包

背景：项目中要用到百度脑图

kityminder-core只是脑图的svg画图核心功能

kityminder-editor 有完整的编辑功能但是他是用angular写的，我们很难引入到我们的vue项目中

后来我们找到了vue-mindeditor 他是用kityminder-core和vue编写菜单按钮完成的，但是他是一个完整的项目，没有把菜单和编辑区域抽成组件，我要把他抽成组件，以npm包的形式引入到我们的项目中

把vue-mindeditor项目的编辑区域封装成一个组件并导出

1、editor.vue改造 就是导出这个vue组件

<template>
<div class="main-container">
  <header-menu></header-menu>
  <main-editor></main-editor>
  <navigator></navigator>
</div>

</template>

<script>
import headerMenu from '@/components/header'
import mainEditor from '@/components/main/mainEditor'
import navigator from '@/components/main/navigator'

export default {
  name: 'vue-minder-editor',// 加个name
  components: {
    headerMenu,
    mainEditor,
    navigator
  },
}

</script>

2、index.js 打包组件的入口文件

require('../node_modules/codemirror/lib/codemirror.js')
require('../node_modules/codemirror/mode/xml/xml.js')
require('../node_modules/codemirror/mode/javascript/javascript.js')
require('../node_modules/codemirror/mode/css/css.js')
require('../node_modules/codemirror/mode/htmlmixed/htmlmixed.js')
require('../node_modules/codemirror/mode/markdown/markdown.js')
require('../node_modules/codemirror/addon/mode/overlay.js')
require('../node_modules/codemirror/mode/gfm/gfm.js')
require('../node_modules/marked/lib/marked.js')
require('../node_modules/kity/dist/kity.js')
require('../node_modules/hotbox/hotbox.js')
require('../node_modules/kityminder-core/dist/kityminder.core.js')
require('./script/expose-editor.js')
import $ from 'jquery'

import vueMinderEditor from './components/editor.vue';
vueMinderEditor.install = Vue => Vue.component(vueMinderEditor.name, vueMinderEditor);
export default vueMinderEditor;

3、webpack的打包脚本

entry: {
    app: './src/index.js'
  },
  output: {
    path: config.build.assetsRoot,
    filename: 'vue-minder-editor.js',
    // chunkFilename: utils.assetsPath('js/[id].[chunkhash].js'),
    library: 'vue-minder-editor',
    libraryTarget: 'umd',
    libraryExport: 'default', // 默认导出
  },
   optimization: {
    splitChunks: {
      cacheGroups: {
        commons: {
          test: /[\\/]node_modules[\\/]/,
          name: 'vendors',
          chunks: 'all'
        }
      }
    },
    runtimeChunk: {
      name: 'runtime'
    }
  },

4、package.json

  "main": "dist/vue-minder-editor.js",

5、vue-mindeditor有store 要把这个剥离出去，这只是一个组件和数据分开， 未完待续......