一个VueJS组件，用于显示PostgreSQL执行计划的图形化虚拟化

pev2 (pev2)

A VueJS component to show a graphical vizualization of a PostgreSQL execution plan.

一个VueJS组件，用于显示PostgreSQL执行计划的图形化虚拟化。

View Demo 查看演示 View Demo 查看演示 View Github 查看Github

免责声明 (Disclaimer)

This project is a rewrite of the excellent Postgres Explain Visualizer (pev). Kudos go to Alex Tatiyants.

该项目是对出色的Postgres Explain Visualizer(pev)的重写。 感谢Alex Tatiyants。

The pev project was initialy written in early 2016 but seems to be abandoned since then. There was no activity at all for more than 3 years and counting though there are several issues open and relevant pull requests pending.

pev项目最初写于2016年初，但此后似乎被放弃了。 超过3年没有任何活动，尽管还有几个问题悬而未决，但相关的拉取请求仍在进行中。

The current project has several goals:

当前项目有几个目标：

• isolate the plan view component and its dependencies in order to use it in

  隔离平面视图组件及其依赖性，以便在其中使用

  
  any web app with for example the ability to load a plan without requiring
  任何具有例如无需计划即可加载计划的功能的Web应用程序
  
  any copy-paste from the user,
  用户的任何复制粘贴，

• make it work with recent version of JS frameworks,

  使它与最新版本的JS框架一起使用，

• upgrade Bootstrap to a more recent version,

  将Bootstrap升级到最新版本，

• use VueJS just for a matter of taste,

  仅出于口味考虑使用VueJS，

• maintain the project to match upgrades in PostgreSQL.

  维护项目以匹配PostgreSQL中的升级。

用法 (Usage)

PEV2 is intended to be used as VueJS component.

PEV2旨在用作VueJS组件。

Install it:

安装它：

npm install pev2

Declare the PEV2 component and use it:

声明PEV2组件并使用它：

import pev2 from "pev2";

new Vue({
  el: "#app",
  data: function() {
    return {
      plan: plan,
      query: query
    };
  },
  components: {
    pev2: pev2
  }
});

Then add the PEV2 component to your template:

然后将PEV2组件添加到您的模板中：

<div id="app">
  <pev2 :plan-source="plan" :plan-query="query"></pev2>
</div>

PEV2 requires Bootstrap (CSS) and FontAwesome to work so don't forget to add the following in you header (or load them with your favorite bundler).

PEV2需要Bootstrap (CSS)和FontAwesome才能工作，因此不要忘记在标头中添加以下内容(或将它们与您喜欢的捆绑程序一起加载)。

<link
  href="https://unpkg.com/[email protected]/dist/css/bootstrap.min.css"
  rel="stylesheet"
/>
<link
  href="https://unpkg.com/[email protected]/css/font-awesome.css"
  rel="stylesheet"
/>

翻译自: https://vuejsexamples.com/a-vuejs-component-to-show-a-graphical-vizualization-of-a-postgresql-execution-plan/