2022年8月14日日曜日

Quasar 超入門

概要
環境
CLI インストール
Quasar アプリの作成
とりあえず動かす
何か書き換えてみる
最後に
参考サイト

概要

Quasar は Vue3 用のユーザインタフェースです
今回はどんな感じで使えるのか試してみました

環境

macOS 11.6.8
nodejs 18.4.0
yarn 1.22.19
quasar 2.7.7

CLI インストール

専用の CLI があるのでこれをインストールします

yarn global add @quasar/cli

Quasar アプリの作成

プロジェクト的なのを作成します
今回は Web アプリを作成しますがどうやら spa/pwa/ssr/bex/electron/capacitor/cordova といろいろ選択できるようです

yarn create quasar

以下のように選択画面になるので「App with Quasar」を選択します

? What would you like to build? › - Use arrow-keys. Return to submit.
❯   App with Quasar CLI, let's go! - spa/pwa/ssr/bex/electron/capacitor/cordova
    AppExtension (AE) for Quasar CLI
    Quasar UI kit

するとプロジェクト名や TypeScript を使うのかとか Lint をどうするのかとか CSS どうするのかとかいろいろと聞かれます
とりあえず今回は全部デフォルトを使うので続けてエンターしていれば OK です

プロジェクトが作成できるまで待ちましょう

とりあえず動かす

プロジェクトが作成できたら動かしてみます

cd quasar-project
quasar dev

これで http://localhost:8080/#/ にアクセスするとデモ画面が表示されます

何か書き換えてみる

コンポーネントがいろいろとあるので使ってみましょう

とりあえずボタンアイコンを使ってみます

vim src/pages/IndexPage.vue

<template>
  <q-page class="flex flex-center">
    <q-icon name="today" class="text-orange" size="2em" />
  </q-page>
</template>

<script>
import { defineComponent } from 'vue'

export default defineComponent({
  name: 'IndexPage'
})
</script>

これで再度ページを確認すると以下のようにアイコンに変わっているのが確認できると思います

最後に

Quasar をインストールして簡単なアプリを作成するところまでやってみました
vuetify と同じようにあいろいろなコンポーネントが用意されているので簡単に UI を作ることができます

タグは <q-xxx> という感じで定義されているので q から始まるコンポーネントを追加していくことになりそうです

参考サイト

https://quasar.dev/start/quasar-cli

hawksnowlog