プログラミング初心者の備忘録です。
Vue3で作成したWebサイトにUIフレームワークを導入したい
現状
- 機能面を作ろうと思い、Vue.jsでJavaScriptをゴリゴリ書きながらFirebaseとの連携を作った
- ある程度の機能が完成したので、乱雑に並べた出力を整形したい
- UIフレームワークを導入しよう
UIフレームワークと大層な事を言っていますが、CSSを書くの面倒だし既存のパーツを外から取ってきたい程度のノリです。
UIフレームワーク選定をするにあたって
何も考えずにVue.jsで書いて、後からUIフレームワークを選定するという行き当たりばったりです。
でもプログラミング初心者だから分からんかったんや許して…。
機能要件は、
- Vue.jsの既存プロジェクトに導入が容易
- パーツを並べるだけでよく、整形や配色を任せたい
- Webサイト、モバイルアプリ双方で扱える
の3点です。
フレームワーク候補は、
- Nuxt.js
- Vuetify3
- Quasar Framework
の3つです。
Nuxt.jsはVue.js関連の統合フレームワーク(?)のようで、Vuexとか盛ってるようです。
既に機能面を作っていて、新しいプラグインを導入されると困りそうなのでやめました。
VuetifyはVue3対応版のVuetify3が2021年9月29日現在まだリリースされていないので却下しました。（10月完成が翌年2月に延期になりました。）
という事で残ったQuasar Frameworkにしました。
調べていくと、Quasar FrameworkはElectronアプリを作成するのに向いているらしく、Webサイトとモバイルアプリ双方にリリースを予定するのにいいみたいです。
ですが、Quasar CLIでプロジェクトを初期化するのが推奨されていて、Vue CLIからプラグインとして導入すると制限的な機能になるらしいです。
まあよくわからんけどQuasar Frameworkにしました！よくわからんし！
Vue-CLIでQuasar Frameworkを導入
Vue-CLIのバージョンが古い場合はアップデートしましょう的な事が公式に書いてあります。
公式ドキュメント
$ vue add quasar
そうすると初期化が始まります。
✔ Successfully installed plugin: vue-cli-plugin-quasar
? Allow Quasar to replace App.vue, About.vue, Home.vue and (if
available) router.js? Yes
? Pick your favorite CSS preprocessor: Sass
? Choose Quasar Icon Set Material
? Default Quasar language pack - one from https://github.com/q
uasarframework/quasar/tree/dev/ui/lang en-US
? Use RTL support? Yes
? Select features: Roboto font, Material
各設定は以上のようにしました。
Icon Setはホームボタンやグラフボタン等、アイコン群をまとめたライブラリのようです。
Material Iconが推奨だと書いてあったので、とりあえずMaterialにしました。
一風変わったアイコンを使用したい場合は、公式ドキュメントに対応しているIcon Setへのリンクがあるので見てみてください。
Quasar Frameworkをどう使えばよいか
「導入は終わったものの、ここからどう使えばいいの？」
僕はこのために1時間以上悩んだんですが、ある程度分かったので流れを書いておきます。
- 入れたいHTMLタグをQuasar API Explorerで検索
- 入れたいタグと似たようなタグが出てきたら、Docsのリンクを踏んでそのタグのドキュメントに飛ぶ
- ページの下のほうにUsageがあるので、その実例から自分が実装したいものを探す
- 見つかったら、View Source(
<>)ボタンを押してソースコードを引っ張ってくる or Edit in CodepenボタンからCSS実装結果を直に見ながら編集する - 自分のサイトに貼り付ける
という手順みたいです。
Vue.jsの<router-link>や<router-view>等も探せばQRouteTab等で出てくるようです。
これからQuasar + Vue3 で開発する方のためになれば
僕はこれからQuasarでゴリゴリ整形していくので、また何かあれば第2章に書きたいと思います。
それでは。