窥探 Vue CLI3 UI 内置插件 - 关闭网络端口

Vue CLI3的图形化界面增加一个好玩的工具，快速的关闭一个网络端口，挺贴心！ vue ui

傻瓜式的 工具 可以先用，但最终要掌握原理哦。

关闭端口一般方法

在Mac上关闭端口

// lsof(list open files)是一个列出当前系统打开文件的工具
lsof -i tcp:8080 
COMMAND   PID   USER   FD   TYPE             DEVICE SIZE/OFF NODE NAME
php     54205 charlesyu    3u  IPv4 0x2d201a97d7761bfd      0t0  TCP localhost:8090 (LISTEN)
// kill pid
kill 54205

复制代码

使用windows dos关闭端口

// 查找pid
netstat -ano|findstr 8080
// 停止端口占用
taskkill /pid 13064
复制代码

Vue CLI3是怎么实现的呢？

假设你已经使用 yarn 命令安装了 Vue CLI3（本来想贴github源码地址，但我感觉用本地环境更好，多动手调试代码是掌握知识的好途径！）

打开文件: 你的用户目录/.config/yarn/global/node_modules/@vue/cli-ui/ui-defaults/widgets.js

module.exports = api => {
  const { registerWidget, onAction, setSharedData } = api.namespace('org.vue.widgets.')
...
registerWidget({
    id: 'kill-port',
    title: 'org.vue.widgets.kill-port.title',
    description: 'org.vue.widgets.kill-port.description',
    icon: 'flash_on',
    component: 'org.vue.widgets.components.kill-port',
    minWidth: 2,
    minHeight: 1,
    maxWidth: 2,
    maxHeight: 1,
    maxCount: 1
  })
}

setSharedData('kill-port.status', 'idle')
onAction('actions.kill-port', async params => {
    const fkill = require('fkill')
    setSharedData('kill-port.status', 'killing')
        try {
          await fkill(`:${params.port}`)
          setSharedData('kill-port.status', 'killed')
        } catch (e) {
          console.log(e)
          setSharedData('kill-port.status', 'error')
        }
})
复制代码

这里是kill-port这个插件注册的位置，插件注册实现的很优雅。

pid-from-port 和 fkill 实现了关闭端口的功能。

（Ps： 记住哦！以后写脚手架的时候会用到的 ）

当点击【终止】按钮时，就会触发这个事件： ../.config/yarn/global/node_modules/@vue/cli-ui-addon-widgets/src/components/KillPort.vue

...
  methods: {
    kill () {
      clearTimeout(this.$_statusTimer)
      this.$callPluginAction('org.vue.widgets.actions.kill-port', {
        port: this.port
      })
    }
  }
复制代码

在事件执行之前先弄清三个问题：

• 1. 这个文件中并没有$callPluginAction对象，这个对象在哪里呢？
• 2. org.vue.widgets.kill-port.title 从哪里来的呢？
• 3. onAction 是怎么工作的？

顺藤摸瓜 找到安装入口有个methods的mixin

../.config/yarn/global/node_modules/@vue/cli-ui/src/util/plugin-action.js

export default {
  install (Vue) {
    Vue.mixin({
      methods: {
        async $callPluginAction (id, params) {
          const result = await this.$apollo.mutate({
            mutation: PLUGIN_ACTION_CALL,
            variables: {
              id,
              params
            }
        })
        return result.data.pluginActionCall :smiling_imp:
...            
复制代码

这里的 this.$apollo.mutate 是 apollo 的更新方法，variables 是 GraphQL 中的语法。

.config/yarn/global/node_modules/@vue/cli-ui/apollo-server/api/PluginApi.js

onAction: (id, cb) => this.onAction(namespace + id, cb)
...
onAction (id, cb) {
    let list = this.actions.get(id)
    if (!list) {
      list = []
      this.actions.set(id, list)
    }
    list.push(cb)
  }
复制代码

这里的onAction会在后面被callAction逻辑调用。

问题二有点复杂, 数据来源是通过GraphQL从CDN上拉取的。

unpkg.com/vue-cli-loc…

...
  "kill-port": {
          "title": "Kill port",
          "description": "终止占用指定端口的进程",
          "input": {
            "placeholder": "输入一个网络端口"
          },
          "kill": "终止",
          "status": {
            "idle": "准备好终止",
            "killing": "终止进程中",
            "killed": "成功终止进程！",
            "error": "无法终止进程"
          }
        }
复制代码

org.vue.widgets.actions.kill-port

还记得上面 :smiling_imp:（这个emoji处返回的对象吗） return result.data.pluginActionCall

在此处有一个整理的过程

.config/yarn/global/node_modules/@vue/cli-ui/apollo-server/schema/plugin.js

Mutation: {
    ...
    pluginActionCall: (root, args, context) => plugins.callAction(args, context),
    
  },
复制代码

.config/yarn/global/node_modules/@vue/cli-ui/apollo-server/connectors/plugins.js

callAction 调用了 onAction 定义的逻辑，完成了关闭网络端口的功能。

async function callAction ({ id, params, file = cwd.get() }, context) {
  ...
  return { id, params, results, errors }
}
复制代码

总结

这个功能本身并不复杂, 但Vue CLI3用了最新的技术栈，在工程化方面做的非常完美。