前端分享会--kibana+vue开发实践

什么是kibana

Kibana 是一个设计出来用于和 Elasticsearch 一起使用的开源的分析与可视化平台，可以用 kibana 搜索、查看、交互存放在Elasticsearch 索引里的数据，使用各种不同的图表、表格、地图等展示高级数据分析与可视化。

什么是Elasticsearch

ElasticSearch是一个基于 Lucene 的搜索服务器。它提供了一个分布式多用户能力的全文搜索引擎，基于 RESTful web 接口。Elasticsearch 是用 Java 开发的，并作为 Apache 许可条款下的开放源码发布，是当前流行的企业级搜索引擎。设计用于云计算中，能够达到实时搜索，稳定，可靠，快速，安装使用方便。

为什么kibana要和vue混在一起

kibana是一个node.js+angular1的web框架。本坑比较熟悉vue.

准备工作

kibana:6.2.4
ElasticSearch:6.2.4
node.js:8.11.2
jdk8
mac电脑
这里要特别注意kibana和elasticSearch版本要保持一致。kibana 也对node版本有要求，尽量用kibana要求的版本（kibana安装依赖时会提示要求版本），当然也可以用其他版本，但是尽量不要相差要求的版本太远。
如果你在开发之前已经用了其他的版本node.那么可以使用nvm来管理node多个版本，很多文章提到brew可以来管理，在本文章截稿之前，brew的相关版本迭代已经不一样，无法顺利管理。

需求是什么

本坑是希望能在kibana开发一个菜单目录所在的页面。运行kibana后，点击新建的目录，渲染出页面。很多前辈写的文章已经有了这个实践，就是使用插件的方式来构建。本着这个思路。我们开始实践。

实践过程

step1 git clone kibana6.2.4的项目，地址：https://github.com/elastic/kibana，放到你想要的目录，文件名保持为kibana，注意要clone 属于6.2.4的tag（git clone -b）。
step2 到官网下载6.2.4版本的elasticsearch，解压和kibana相同的目录下。地址：https://www.elastic.co/downloads/past-releases

step3 把es先跑起来，注，跑es需要先安装JDK
不用修改配置文件，直接进入elasticsearch-6.2.4\bin，双击elasticsearch.bat文件。打开http://localhost:9200/地址，发现类似下面的就是成功了。黄色圈起来的地方为版本号。

step4 kibana文件下，npm install所有依赖
step5 在plugins文件夹下，新建一个文件夹app。同时在plugins文件夹下按照step1再操作一下。使得plugins目录下有app和kibana（生成器需要用到，我也很纳闷，如果没有，生成器会提示需要kibana,很想知道为啥）。
step6 进入app npm install -g yo generator-kibana-plugin,然后执行yo kibana-plugin生成插件前端项目。很多文章提到用sao生成器，然而本坑实践后，在生成过程会出现缺少相关库的情况。
回到kibana\目录，执行npm start即可，运行成功之后打开http://0.0.0.0:5603/***/app/kibana即可自动跳到类似页面。本坑实践是0.0.0.0有效，localhost会出现异常。不管如何，如果出现以下页面情况说明你的操作是成功的。

kibana的启动配置不同，启动的方式也不同：

在刚开始安装是执行sh ./bin/kibana --dev 页面不同打开。应该换成sh ./bin/kibana --dev --no-base-path

添加vue相关配置

step1 在public下新建一个文件夹pages，里面新建一个文件App.vue，写上最简单的vue结构.

<template>
  <div>{{message}}</div>
</template>
<script>
  export default {
    data() {
      return {
        message:'helloWorld'
      }
    }
  }
</script>
<style>
</style>

step2 修改templates/index.html文件代码改

<div class="container" ng-controller="helloWorld">
  <div id="app"></div>
</div>

step3修改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');
  });

step4
在kibana/目录下

安装vue：npm install vue -d。
安装vue-loader：npm install vue-loader@14 -D
安装vue-template-compiler：npm install vue-template-compiler -D

step5
修改文件kibana/src/optimize/base_optimizer.js：
在这个rules下加上这部分：

{
  test: /\.vue$/,
  loader: 'vue-loader'
},

完了之后在启动npm start

sass带来的麻烦

kibana本身是只支持less的。如果想使用sass，需要修改相关配置，同样是base_optimizer文件

{
 test: /\.vue$/,
  loader: 'vue-loader',
  options: {
    loaders: {
      scss: 'vue-style-loader!css-loader!sass-loader' // <-- this line
    }
  }
}, {
 test: /\.scss$/,
  loaders: 'style-loader!css-loader!postcss-loader!sass-loader',
  options:{
     module:false
    }
 },

加上后，如果在js引入sass文件依然会出现异常，此时需要隐去UglifyJsPlugin，因为异常来源于这个插件。
同时sass样式最好放到vue文件的style标签内。

    return webpackMerge(commonConfig, {
      plugins: [
        new webpack.DefinePlugin({
          'process.env': {
            'NODE_ENV': '"production"'
          }
        }),
        // new UglifyJsPlugin(),
      ]
    });
  }

最后的结果：

鸣谢：
用Vue开发kibana6插件
 Kibana插件开发