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

原创

虫无涯

修改于 2025-09-09 14:05:28

16300

代码可运行

文章被收录于专栏：全栈测试技术全栈测试技术

运行总次数：0

代码可运行

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

@TOC

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；

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

加载 NVM 到当前终端：

   source ~/.bashrc

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

   nvm install 14

验证安装：

   node --version 	
   npm --version

3.2 项目下载

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

https://registry.npmmirror.com

3.3 修改npm镜像源

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

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

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

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

# 方法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

查看可用镜像源：

  nrm ls

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

  nrm use taobao

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

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

3.4 部署

npm i # 安装依赖

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

启动后如下：

浏览器输入对应的网址即可：
在这里插入图片描述

4 项目中使用

安装本组件：

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

在 main.js 中：

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

Vue.use(VueTestcaseMinderEditor)

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

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

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

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

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

在页面的 .vue 文件中：

<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>