こんにちは、千田です。

 

先日、スワローの特別休暇制度の一つ、ファミリーサポート休暇を利用してもうすぐ4歳になる娘の幼稚園の入園式に行ってきました。

 

ファミリーサポート休暇というのは超簡単に言うと「家族の為に休める」制度です。有給休暇とは別扱いです！

なんて素晴らしい！！

 

 

さて、さっそく本題ですが今回はVue.jsとAdminLTEを使って簡単なElectronアプリを

作ってみたいと思います！

 

先日のたくやのブログにもありましたが、スワローでは最近Vue.jsを触る機会が増えてきています。

 

入門編についてはたくやがしっかり書いてくれてますので、千田はまた違った切り口

（毎回思いつきで書いてるだけですが・・・）で書いていきたいと思います

 

ちなみにAdminLTEはBootstrapベースの管理画面用テンプレートです。

 

環境

端末：MacBook Pro

Vue.jsバージョン：2.6.6

Vue CLIバージョン：3.5.5

 

やること

• electron-builderの追加
• AdminLTEの追加
• Vue.jsでのAdminLTEの読み込み
• Vueコンポーネントの作成
• ビルド

 

前提としてVue CLIを使って初期セットアップをしています。方法は下記のたくやのブログを見ていただければと思います。

第１回 – Vue.jsをインストールして実際に触れてみよう！

 

 

それではさっそくやっていきたいと思います。

 

electron-builderの追加

下記のコマンドでelectron-builderを追加します。

electron-builderは簡単にいうとWebコンテンツをElectron化するビルドツールです。（そのまんまですねw）

[cc_bash]
$ vue add electron-builder
[/cc_bash]

 

AdminLTEの追加

続いて、AdminLTEの追加です。Vue.js向けのパッケージがあったので今回はこちらを使います。

[cc_bash]
$ npm i –save vue2-admin-lte
[/cc_bash]

 

Vue.jsでのAdminLTEの読み込み

Vue CLIの2系まではインストール時にwebpack.base.conf.jsというものが生成されていましたが、Vue CLI3からは生成されなくなりました。

なので、webpack.base.conf.jsに追記していた諸々の設定はvue.config.jsというファイルに

記述することになります。保存場所はpackage.jsonと同じ階層。

ここでは、Vue.jsからAdminLTEを利用する際のエイリアスについて記述しています。

vue.config.js

[cc_javascript]
module.exports = {
configureWebpack: {
resolve: {
alias: {
‘va’: ‘vue2-admin-lte/src’
}
}
}
}
[/cc_javascript]

 

続いてmain.jsで読み込みます。

main.js

[cc_javascript]
import Vue from ‘vue’
import App from ‘./App.vue’
import router from ‘./router’
import store from ‘./store’
import ‘va/lib/css’ // 追記
import ‘va/lib/script’ // 追記

Vue.config.productionTip = false

new Vue({
router,
store,
render: h => h(App)
}).$mount(‘#app’)

[/cc_javascript]

 

色の指定をします。

index.html

[cc_html]

[/cc_html]

 

 

Vueコンポーネントの作成

electron-builderとAdminLTEを利用する準備までできたら、ヘッダー、サイドバー、フッターをそれぞれコンポーネント化してみます。

 

MyHeader.vue

[cc_javascript]


[/cc_javascript]

 

MyAside.vue

[cc_javascript]


[/cc_javascript]

 

MyFooter.vue

[cc_javascript]


[/cc_javascript]

 

App.vue

[cc_javascript]


[/cc_javascript]

 

ビルド

はい、ここまで出来たら、あとはElectron用にビルドするだけです。

[cc_bash]
$ npm run electron:build
[/cc_bash]

 

画面イメージ

 

こんな感じです。

 

まとめ

どちらかというとHTML、CSSが苦手な千田は以前からAdminLTEにはお世話になっていましたが、

Vue.js、Electronと組み合わせる事で、一層リッチでサクサク動く管理アプリケーションが

作れそうと思って今回やってみました。

 

導入手順も簡単なので、個人的にはオススメです！

 

それでは！

 

参考

https://qiita.com/ultrasevenstar/items/e5e8dfecc92077aa7736