# CustomViewModules: 自定义一个 Tap 窗口

用户可以自己定一个工具 tap 窗口和”项目管理器“是一样的展现形式。

因为工具前端开发使用了Vue2.0,所以插件也需要用 Vue 开发。 Tap窗口这里我们使用的是Vue/Vuex的框架。

用户需要定义 vuex 的module，与Vue Compnent。

UI交互使用 vue 组件内部数据管理使用module.state(可以参考 vuex 的module) 调用外部tap，或是全局的接口，使用 store 的dispatch/commit 获取外部的数据，使用的是 action 传入的 rootState , 或是 vue 组件中的this.$store.state 外部调用内部的函数也是dispatch/commit内部注册的actions/mutations。

比如 assets/idePlugins/index.ts :

// module
const tapModule = {
  state: {},
  mutations: {},
  actions: {}
}

const tapVue = {
  name: 'editorTap',
  // 在 JavaScript 中是 camelCase 的
  template: `<h3>{{ 'janzenzhang' }}</h3>`,
  // 默认会有这些入参
  props: {},
}

// idePlugins/index.js
export default {
  CustomViewModules: {
    'editorCustomTap': { // tap的名字
      vue: tapVue,
      module: tapModule
    }
  },
  ...
}