🐶

Quasar CLIの使い方

2023/06/28に公開

JavaScript

Vue.js

quasar

tech

はじめに

Quasar framework が提供している Quasar CLI の使い方をまとめます。Quasar framework は Nuxt などの有名フレームワークの Vue3 対応が遅れる中、いの一番に Vue3 対応を果たしたフレームワークです。デフォルトでマルチプラットフォームに対応するために capacitor や electron などのプラットフォームに対応しています。また、UI コンポーネントも豊富に用意されています。ただし、日本語のドキュメントが少ないためか、国内だと使用している人はそれほどいません。

ここでは、Quasar を使用する上で必要な Quasar CLI の使い方を簡単にですがまとめます。

Quasar CLI とは

Quasar framework で提供されている CLI ツールです。基本的には Nuxt や vue/cli と同じようなものです。Quasar はよく UI コンポーネントとして紹介されますが、実際は Nuxt などと似たようなフレームワークです。そこに高機能 UI コンポーネントがくっついているというのが正しいです。

コマンド一覧

$ quasar

  Example usage
    $ quasar <command> <options>

  Help for a command
    $ quasar <command> --help
    $ quasar <command> -h

  Options
    --version, -v Print Quasar App CLI version バージョン表示

  Commands
    dev, d        Start a dev server for your App 開発サーバー起動
    build, b      Build your app for production ビルド
    clean, c      Clean all build artifacts クリーン
    new, n        Quickly scaffold page/layout/component/... vue file 色々なファイルを作成
    mode, m       Add/remove Quasar Modes for your App モードの追加・削除
    inspect       Inspect Vite/esbuild configs used under the hood Vite/esbuild の設定を確認
                    - keeps into account your quasar.config.js and your installed App Extensions quasar.config.js とインストールされている App Extensions を考慮
    ext, e        Manage Quasar App Extensions. App Extension の管理
    run, r        Run specific command provided by an installed Quasar App Extension App Extension で提供されるコマンドの実行
    describe      Describe a Quasar API (component) Quasar API (component) の説明
    test, t       Run @quasar/testing App Extension command
                    - requires @quasar/testing App Extension to be installed @quasar/testing App Extension がインストールされている必要があります
                    - this is an alias command for convenience purposes 便利なエイリアスコマンドです
    info, i       Display info about your machine and your App 環境情報表示
    help, h       Displays this message ヘルプ表示

  If the specified command is not found, then "quasar run" will be executed with the provided arguments. 指定されたコマンドが見つからない場合は、指定された引数で "quasar run" が実行されます。

  Commands supplied by @quasar/cli global installation( @quasar/cli グローバルインストールで提供されるコマンド ):

    upgrade       Check (and optionally) upgrade Quasar packages from a Quasar project folder Quasar パッケージのアップグレード
    serve         Create an ad-hoc server on App's distributables 作成したアプリの配布用ファイルをサーバー起動

インストール・プロジェクト作成

以下のコマンドでインストール・プロジェクト作成できます。

また、インストールには以下の要件があります。

Node 12+ は Webpack 用の Quasar CLI に、Node 14+ は Vite 用の Quasar CLI に必要です。
Yarn v1 (強く推奨)、PNPM、または NPM が必要です。

yarn global add @quasar/cli
yarn create quasar

# or:

npm i -g @quasar/cli
npm init quasar

# or:

pnpm add -g @quasar/cli # experimental support
pnpm create quasar # experimental support

ビルド・ローカル起動

以下のコマンドでプロジェクトをローカル起動できます。

quasar build # ビルド
quasar dev # ローカル起動

また、ビルドコマンドでは、以下のオプションがあります。デフォルトでは SPA モードでビルドされます。

quasar build -m pwa # PWA モードでビルド
quasar build -m spa # SPA モードでビルド
quasar build -m ssr # SSR モードでビルド
quasar build -m  capacitor -T [ios|android] # Capacitor モードでビルド ios or android
quasar build -m electron # Electron モードでビルド

サーバ起動

以下のコマンドで、本番環境でも使用可能なサーバが起動します。

quasar serve

何も考えたくない場合は以下の通り


# --port <port_number> でポート番号を指定できます
# --cors で 全てのオリジンを許可します。
quasar serve --port <port_number> --cors

拡張機能

Quasar の拡張機能を追加するには以下のコマンドを使用すると便利です。
以下はテスト用の拡張機能を追加する例です。

quasar ext add @quasar/testing

削除は以下の通り。

quasar ext remove @quasar/testing

拡張機能は以下の URL で確認できます。

Discover App Extensions

リソース追加

自分はあまり使用しませんが、以下のコマンドにて、リソースを追加できます。

quasar new <p|page> [-f <option>] <page_file_name> # ページを追加
quasar new <l|layout> [-f <option>] <layout_file_name> # レイアウトを追加
quasar new <c|component> [-f <option>] <component_file_name> # コンポーネントを追加
quasar new <b|boot> [-f ts] <boot_name> # ブートファイル（ライブラリ初期化用ファイル）を追加
quasar new <s|store> [-f ts] <store_module_name> # ストアモジュールを追加
quasar new ssrmiddleware [-f ts] <middleware_name> # SSR ミドルウェアを追加

おわりに

以上、Quasar CLI の紹介でした。個人的に好きなフレームワークなので、使用してくれる人が増えると嬉しいです。

参考

Quasar framework/Commands List