# 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
    }
  },
  ...
}