【Vue】Vue Element Adminで簡単な画面を作ってみた

はじめに

TechDivの金です。
今回は Vue Element Admin が使っているライブラリを適用し、
Web画面を作る一連の流れを説明させていただきたいです。

Vue Element Adminとは

Vue Element Adminとは

vue-element-admin は管理画面のフロントエンドのインタフェースで、vue と element-uiを使っています。i18nの多言語対応、可変ルート、権限、典型的なビジネスアプリテンプレートであり、豊富なコンポーネントを提供しています。素早くビジネス用の管理画面の現型を構築に役立ちます。
引用：PanJiaChen/vue-element-admin

デモ画面

vue-element-admin デモページ

選定理由

Vue エコシステム
1位： Vue Element Admin +22.7k
2位： Element +9.4k
3位： Vuetify +7.5k
引用： JavaScript ベスト・オブ・ザ・イヤー 2019

Vue.jsのテンプレートを探していましたが、
上記の2019年度のVue関連システムランキングの1位であった
Vue Element Adminに興味を持つようになりました。
いろいろ調査するとドキュメントも充実していたので、気軽に試して見ることができました。

ライセンス

MIT License

Vue Admin Templateの起動

　Vue Admin Template

１．利用環境

　・OS：windows10

　・NodeJs：NodeJs 12.16.1

　・エディター：Visual Studio Code 1.43.2

２．ソースコードダウンロード

　テンプレートが必要なため、「vue-element-admin」で提供している「vue-admin-template」を使用

　gitをインストールしてないため、ソースを丸ごとダウンロードし、解凍

３．npm install

　① cmd 実行

　② cd c:\解凍ディレクトリ\vue-admin-template-master

cd テンプレートのフォルダ

　③ npm install コマンド実施

npm install

　④ グラフを実装する際は echarts のインストールが必要

npm install echarts vue-echarts

４．npm run dev

npm run dev

５．起動確認

「npm run dev」コマンドが実施されると自動に画面が立ち上がる
http://localhost:9528/ で自動に起動される

メニュー追加

サイドのメニューに「テストチャート」、「テストテーブル」を追加

① index.vueファイル作成

　src/views/
　　testChart/index.vue
　　testTable/index.vue

② routerにソースコード追加

　src/router/index.js

  //テストチャートメニュー追加
  {
    path: '/testCharts',
    component: Layout,
    children: [
      {
        path: 'index',
        name: 'TestChart',
        component: () => import('@/views/testChart/index'),
        meta: { title: 'テストチャート', icon: 'dashboard' }
      }
    ]
  },
  //テストテーブルメニュー追加
  {
    path: '/testTable',
    component: Layout,
    children: [
      {
        path: 'index',
        name: 'TestTable',
        component: () => import('@/views/testTable/index'),
        meta: { title: 'テストテーブル', icon: 'table' }
      }
    ]
  },

element-ui Table作成

ElementUI：ElementUIは Vue.jsのコンポーネントライブラリ
elタグで自動にコンポーネントが適用される

src/views/testTable/index.vue

<template>
  <div class="app-container">
    <el-table
      v-loading="listLoading"
      :data="tableData"
      element-loading-text="Loading"
      border
      fit
      highlight-current-row
    >
      <el-table-column
        prop="date"
        label="Date"
        width="180">
      </el-table-column>
      <el-table-column
        prop="name"
        label="Name"
        width="180">
      </el-table-column>
      <el-table-column
        prop="address"
        label="Address">
      </el-table-column>
    </el-table>
  </div>
</template>
<script>
export default {
  data() {
    return {
        tableData: [{
        date: '2020-05-03',
        name: 'Tom',
        address: 'No. 189, Grove St, Los Angeles'
        }, {
        date: '2020-05-02',
        name: 'Tom',
        address: 'No. 189, Grove St, Los Angeles'
        }, {
        date: '2020-05-04',
        name: 'Tom',
        address: 'No. 189, Grove St, Los Angeles'
        }, {
        date: '2020-05-01',
        name: 'Tom',
        address: 'No. 189, Grove St, Los Angeles'
        }]
    }
  }
}
</script>

echarts グラフの作成

echarts： Javascriptのデータ可視化ライブラリ

Vue Element Admin が提供している「MixChart.vue」、「resize.js」を使いグラフを表示してみた

　src/views/
　　testChart/components/mixins/resize/js　　Vue Element Adminより抜粋
　　testChart/components/MixCharts.vue　　Vue Element Adminより抜粋
　　testChart/index.vue

感想

実はVue.jsについては初心者であり、
どこからどのように勉強していくかにすごく難しさを感じていましたが、
ログインログアウト、コンポーネントの利用方法、別ライブラリの使用などいろいろと勉強になりました。
また、Echartsについてはもっと深く勉強し、Dashboardや可視化に使ってみたいと思います。