用Vue开发kibana6插件
kibana版本：6.1.1
注意本次教程为kibana6.1.1版本的插件开发，由于kibana6.3.0及以上版本用Kibana Plugin Generator生成插件模板，我试过，但是改了插件模板的代码之后，服务一直处于restarting server状态，故我把kibana版本退到6.1.1，而且生成插件的模板也变成sao，下文有说。
一、搭建环境
step1： 把kibana6.1.1的git项目下载下来，地址：https://github.com/elastic/kibana，解压到任意一个目录。
step2： 到官网下载6.1.1版本的elasticsearch，解压到任意一个目录。地址：https://www.elastic.co/downloads/past-releases
step3：把es先跑起来，注，跑es需要先安装JDK
不用修改配置文件，直接进入elasticsearch-6.1.1\bin，双击elasticsearch.bat文件。
打开http://localhost:9200/地址，发现类似下面的就是成功了。红色圈起来的地方为版本号
step4：把kibana跑起来，注：kibana运行要安装相应的node版本（版本要求在.node-version文件可见），kibana6.1.1要求的node版本是6.12.2
①：把kibana-6.1.1的文件夹名字改为kibana，因为在kibana6.3.0以上版本kibana安装插件时会根据kibana这个名字路径进行放置的，而不是kibana-6.1.1这个名字，当成习惯，改一下好了。我顺便把es和kibana放在同一个目录下：
②：进入kibana/目录，运行npm install把相关依赖包安装了
③：全局安装kibana插件模板生成器sao：npm install -g sao
④：进入kibana\plugins\目录，手动创建一个文件夹，取名任意，我这里取名为app，进入kibana\plugins\app目录运行sao kibana-plugin，然后一路点回车，sao就会帮你安装一个插件的模板文件了。
⑤：回到kibana\目录，执行npm start即可，运行成功之后打开http://localhost:5601即可自动跳到类似页面：
点击右侧的图标A，会跳到app的欢迎界面。
二、文件结构及部分解读
①综述：插件开发主要是在kibana/plugin/app下面进行开发
②server： server就是服务器，以及路由设置。默认生成的模板文件会带有一个路由的案例，可自行查看.
③public： 程序开发的主要文件夹。
④index.js: 相当于插件的入口文件，kibana以new kibana.Plugin方式注册新插件
进入index文件就会执行，main: 'plugins/app/app'这个代码的意思就是打开plugins/app/public/app.js文件作为响应。而app.js里面就是一些angular语法，以及这个文件的响应。
uiExports的各个设置意义大概如下，官方网址：https://www.elastic.co/guide/cn/kibana/current/development-uiexports.html
三、用Vue开发kibana插件
①：在public下新建一个文件夹pages，里面新建一个文件App.vue，写上最简单的vue结构
<template>
<div>{{message}}</div>
</template>
<script>
export default {
data() {
return {
message:'helloworld'
}
}
}
</script>
<style>
</style>
②：修改templates/index.html文件代码改为
<div class="container" ng-controller="demoHelloWorld">
<div id="app"></div>
</div>
③：修改public/app.js文件，代码修改为：
import { uiModules } from 'ui/modules';
import uiRoutes from 'ui/routes';
import Vue from 'vue/dist/vue.js';
import App from './pages/App.vue';
import 'ui/autoload/styles';
import './less/main.less';
import template from './templates/index.html';
uiRoutes.enable();
uiRoutes
.when('/', {
template
});
uiModules
.get('app/demo', [])
.controller('demoHelloWorld', function ($scope, $route, $interval) {
new Vue({
components: { App },
render: h => h('app')
}).$mount('#app');
});④：在kibana/目录下
1. 安装vue：npm install vue -d。
2. 安装vue-loader：npm install aaa@qq.com -d注：15版本与14版本有差异，请注意，我这里安装vue-loader的14版本
3. 安装vue-template-compiler：npm install vue-template-compiler -d
⑤：修改文件kibana/src/optimize/base_optimizer.js：
在这个rules下加上这部分：
{
test: /\.vue$/,
loader: 'vue-loader'
},⑥：在kibana/目录下执行代码npm start，打开http://localhost:5601页面下的app这个页面，即可看到输出了’helloworld’。
至此，你可以用vue来开发kibana的插件了！
附一：用在Vue中使用sass
①：npm install css-loader sass-loader node-sass vue-style-loader --save-dev
②：npm install aaa@qq.com --save-dev，vue-loader的14版本与15版本有差异，请注意
在这个rules下加上这部分：
{
test: /\.vue$/,
loader: 'vue-loader',
options: {
loaders: {
scss: 'vue-style-loader!css-loader!sass-loader' // <-- this line
}
}
},改一下App.vue文件
<template>
<div class="header">
<p class="p">{{message}}</p>
</div>
</template>
<script>
export default {
data() {
return {
message:'helloworld'
}
}
}
</script>
<style lang="scss">
.header {
width: 500px;
height: 200px;
background: #ddd;
.p {
color: #777;
font-size: 20px;
line-height: 200px;
text-align: center;
}
}
</style>
run start一下就可以在http://localhost:5601看到效果了
附二：插件打包&安装
①打包：在kibana/plugins/app目录下执行npm run build，即可在kibana\plugins\app\build找到压缩包
②安装：在kibana/bin目录下执行kibana-plugin installl file:///D:/k/kibana/plugins/app/build/app-0.0.0.zip，其中D:/k/kibana/plugins/app/build/app-0.0.0.zip为压缩包地址。
本人最近在开发kibana插件，包括但不限于：汉化kibana，二次开发kibana，有意一起研究的小伙伴可以加我QQ：820327571（备注kibana）