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