【分享】基于百度脑图，并使用Vue二次开发的用例脑图编辑器组件

偶然间发现了这个项目，分享出来。

【分享】基于百度脑图，并使用Vue二次开发的用例脑图编辑器组件

[1 项目地址](#1 项目地址)
[2 项目简介](#2 项目简介)
[3 项目部署](#3 项目部署)
- [3.1 安装node和npm](#3.1 安装node和npm)
- [3.2 项目下载](#3.2 项目下载)
- [3.3 修改npm镜像源](#3.3 修改npm镜像源)
- [3.4 部署](#3.4 部署)
[4 项目中使用](#4 项目中使用)

1 项目地址

基于百度脑图，并使用Vue二次开发的用例脑图编辑器组件

2 项目简介

基于百度脑图，并使用Vue二次开发的用例脑图编辑器组件；
底层基础（因为需要协同修改，已经整体挪到项目中）：百度脑图；
改造为 vue 组件： fudax/vue-mindeditor ；
补充部分用例需要用的功能 MeYoung/Case_Minder_Vue；
采用Vue 全家桶 + Element UI + webpack 开发

3 项目部署

3.1 安装node和npm

因为是vue2开发的，vue2的一般16以下，vue3的一般需要18以上

安装 NVM 运行以下命令安装 NVM；

python 复制代码

   curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.7/install.sh | bash

加载 NVM 到当前终端：

python 复制代码

   source ~/.bashrc

安装 Node.js 14 使用 NVM 安装指定版本：

python 复制代码

   nvm install 14

验证安装：

python 复制代码

   node --version 	
   npm --version

3.2 项目下载

下载项目到本地（Ubuntu24.04）；
解压后，修改项目中的依赖组件文件package-lock.json；
打开后，修改里边所有依赖的下载链接以淘宝镜像源：

python 复制代码

https://registry.npmmirror.com

3.3 修改npm镜像源

使用 npm 全局安装 nrm，建议通过淘宝镜像加速安装：

python 复制代码

# 使用淘宝镜像安装
npm install -g nrm --registry=https://registry.npmmirror.com

# 或直接安装（若网络通畅）
npm install -g nrm

权限问题处理：若报错权限不足，可尝试以下方式：

python 复制代码

# 方法1：使用 sudo
sudo npm install -g nrm

# 方法2：配置用户级 npm 目录（推荐）
mkdir ~/.npm-global
npm config set prefix '~/.npm-global'
echo 'export PATH=~/.npm-global/bin:$PATH' >> ~/.bashrc
source ~/.bashrc
npm install -g nrm

查看可用镜像源：

python 复制代码

  nrm ls

切换镜像源（如淘宝源）：

python 复制代码

  nrm use taobao

添加/删除自定义源（如企业私有源）：

python 复制代码

  nrm add private http://your-registry-url
  nrm del private

3.4 部署

python 复制代码

npm i # 安装依赖

python 复制代码

npm run lib && npm run serve # 本地运行

启动后如下：

浏览器输入对应的网址即可：

4 项目中使用

安装本组件：

python 复制代码

npm --registry=https://registry.npm.taobao.org install vue-testcase-minder-editor

在 main.js 中：

python 复制代码

import 'vue-testcase-minder-editor/lib/VueTestcaseMinderEditor.css'
import VueTestcaseMinderEditor from 'vue-testcase-minder-editor'

Vue.use(VueTestcaseMinderEditor)

本组件依赖 vuex 进行部分全局配置管理。如果没有用 vuex ，可直接在 main.js 加入下面代码。

python 复制代码

Vue.use(Vuex)
const store = new Vuex.Store({
  modules: {
    caseEditorStore: VueTestcaseMinderEditor.caseEditorStore
  }
})

如果有，可以仿照下面代码，动态注册对应 module ：

python 复制代码

const store = new Vuex.Store({...})

// 动态注册用例编辑器项目的 store 模块到项目中
store.registerModule('caseEditorStore', {
  ...VueTestcaseMinderEditor.caseEditorStore
})

在页面的 .vue 文件中：

python 复制代码

<template>
    <VueTestcaseMinderEditor 
      :initJson="initJson"  // 初始化数据，加载脑图时自动更新。同时也会监听数据变化，数据一更新就重新加载
      ref="minderEditor"    // 组件应用名称
      :allowEditPriority="true"  // 是否允许增删改优先级，实时更新状态
      :allowEditLabel="true"     // 是否允许增删改标签，实时更新状态
      :allowEditResult="true"    // 是否允许增删改测试结果，实时更新状态
      :allowEditNode="true">     // 是否允许增删改节点内容，实时更新状态
    </VueTestcaseMinderEditor>
</template>
...

<scripts>

export default {

  ...

  data() {
    return {
      // 测试数据，实际可不必引入
      initJson: {
          'data': {
            'id': 2,
            'text': 'Design project',
            'image': 'https://testerhome.com/uploads/user/avatar/6109.jpg',
            'imageSize': { 'width': 200, 'height': 200 }
          }
      }
    }
  },
  methods: {
    // 示例方法，实际可根据需要绑定到其他元素事件中，比如 v-on:click="logCurrentData"
    logCurrentData: function(event) {
      console.log("编辑器中的最新用例内容：", this.$refs.minderEditor.getJsonData())
    }
  }
}
<scripts>

完整示例可查看 examples 下面的2个文件。