素敵なサムシングを独断と偏見で一方的に紹介するブログ(´・ω・`)

IT

【Vue.jsのUIフレームワーク】Electronアプリのデザインフレームワークに「Quasar」をインストール・導入する方法

投稿日:

スポンサーリンク

336×280




VueのUIフレームワークは「Quasar」で決まり

沢山あって迷う問題

先日、Vue.jsを使う中で、UIフレームワークを何にするかで悩みました。

Vuetify Bootstrap-Vue Buefy Element などなど、様々なものがありますが、その中でもQuasarがダントツで使いやすい&コンポーネントの数が膨大だったので使ってみる事にしました。

Quasarとは?

Quasar(クエーサー)とは、マテリアルデザインベースのデザインを簡単に構築することが可能なVue.js製のデザインフレームワークです。


Build high-performance VueJS user interfaces in record timeQuasar Framework

使いやすさやデザインはもちろんですが、何よりコンポーネントの数が圧倒的に多いのが特徴だと思います。

どんなものがあるかはドキュメントを見ていただければなと思います。

vue-cliで簡単にプロジェクトに導入可能

また、このQuasarvue-cliによる導入に対応しているのでコマンドラインからさくッと導入することが出来ます。

今回は実際に導入してみましたので手順を紹介しようと思います。

やり方

quasar-frameworkの導入

まずはyarnからインストールしましょう。

コンポーネント利用の追加

次に、Vue.jsquasarを利用する記述をmain.tsに追加しましょう。

これで各コンポーネントでimportすることなくquasarのコンポーネントを使えるようになりました♪

確認

では、試しにButtonコンポーネントを使ってみましょう。

無事にコンポーネントが表示されましたね♪

vue-cliとyarnで扱えるバージョンが違う

無事にquasarのコンポーネントが使えるようになりましたが、yarnでquasarをインストールすると、バージョンがv0.17系になってしまいます。

最新版はv1系がすでにリリースされているので、ドキュメントに記載されているコンポーネントを使おうとすると存在しないコンポーネントがあるのでうまく動かなくなってしまいます。

なので、先ほどの修正を戻した上でvue-cli経由でquasarをインストールし直そうと思います。

すると、プロジェクト全体が自動で修正されます。

次、プロジェクトルートに作成されたquasar.jsmain.tsからimportします。

確認

では、再度Electronアプリを起動してみましょう。

無事にv1.1.0のquasarが適用されていますね♪

何が変わったか?

いろいろ変わっている部分がありますが、要点だけ抜粋して解説しようと思います。

Routerが親子関係を持つように変更

まずは、src/router.tsの内容が変わっています。

元々はフラットにAbout.vueHome.vueがルートとして設定されていましたが、DefaultLayout.vueというコンポーネントが親routeになり、その子routeとしてAbout.vueHome.vueが紐づく形になりました。

これにより、デスクトップアプリケーション特有のサイドメニューによる機能切替のレイアウトが実現可能となります。

子routeのtemplateが変更

次に、子routeのHome.vueAbout.vueのコンポーネントに変更が入りました。

divタグで囲まれていた部分がq-pageタグにさし変わっています。

これにより、quasarに沿ったデザインでのroute遷移が可能になります。

Layout Builderでコード生成

自動生成後のレイアウトだと、いまいちな感じがしたのでもう少しいい感じに調整したいと思います。

quasarでは、レイアウトをGUIで設定してコード生成してくれる便利な機能があります。

Layout Builder | Quasar Framework

GUI上で設定をポチポチして、EXPORT LAYOUTボタンを押すと自動でコードが生成されるので、それをsrc/layouts/Default.vueに貼り付ければOKです。

自分でコーディングすると大変な部分を直感的に生成出来るのは開発者としてもとても助かりますよね♪

簡単にベースのレイアウト構成が完成しました。

本日のオススメ商品

終わりに

以上のように、デザインフレームワークを用いてアプリケーションの基本的なレイアウトを整えることが出来ました。

Electronアプリを作る上で、とても便利なコンポーネントが沢山用意されているので是非試してみてください♪

336×280




336×280




CATEGORIES & TAGS

IT, , , , , , , , , , , , ,

blogenist

Author: blogenist