【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 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

1.利用環境

 ・OS:windows10

 ・NodeJs:NodeJs 12.16.1

 ・エディター:Visual Studio Code 1.43.2

2.ソースコードダウンロード

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

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

Vue Admin Template ファイルダウンロード&解凍

3.npm install

 ① cmd 実行

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

 ③ npm install コマンド実施

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

4.npm run dev

5.起動確認

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

Vue Admin Template ログイン画面&メイン画面

メニュー追加

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

① index.vueファイル作成

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

メニュー追加該当vue作成

② routerにソースコード追加

 src/router/index.js

追加したメニューが画面より確認できる

element-ui Table作成

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

src/views/testTable/index.vue

テストテーブル画面

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や可視化に使ってみたいと思います。