Vue3でQuasarのUIライブラリを使おう
始める前に 今日はVueのUIフレームワークを紹介します。先にVueの基本、Viteの使い方、Node.jsの基本を知っていると理解しやすいです。 Quasarフレームワークとは Quasarの特徴を紹介します。 Quasarとは? Quasarで作成できるもの: Quasarのモットーは、コードを一度書き、それをウェブサイト、モバイルアプリ、および/またはElectronアプリとして同時に展開できるフレームワークです。1つのコードベースで最新のCLIを使用してアプリを効率的に開発し、ベストプラクティスに基づく高速なQuasarウェブコンポーネントを提供します。 Quasarを使用する際、Hammer.js、Moment.js、またはBootstrapなどの追加の重いライブラリは必要ありません。軽量化されたこれらのライブラリもQuasarで使用できます。 ここまで読めばQuasarを始めない理由はありません。早速セットアップの仕方を見てみましょう。 条件 使用するコンピュータに、Node.jsのバージョン14以上(または新しいLTS Node.jsバージョン)と、NPMのバージョン6.14.12以上、またはYarnのバージョン1.21.1以上がインストールされていることを確認してください。 このコマンドを実行すると、現在のNode.jsのバージョンがターミナルに表示されます。 このコマンドを実行すると、現在のNPMのバージョンがターミナルに表示されます。 プロジェクトの作成 以下のコマンドを実行してください: createまたはinitコマンドを実行すると、いくつかのオプションがプロンプトで表示されます。あなたのニーズに応じて、CLIのタイプ(ViteまたはWebpack)を選択したり、TypeScriptサポートを追加したり、異なるCSSプリプロセッサを選択したりできます。オプションについて不明点がある場合、デフォルトを選択(Enterキーを押す)して進んでも問題ありません。後で必要に応じて、CLIのタイプ以外のオプションを変更することもできます。 下記にセットアップのオプションの例を記載します。 オプショナル – グローバルCLIのインストール Quasarをより多く活用するために、グローバルCLIもインストールすることをお勧めします。これにより、ターミナルで直接Quasarコマンドを実行したり、テスト用のローカルHTTPサーバーを実行したり、プロジェクトをアップグレードしたりすることができます。 以下のコマンドを使用してグローバルCLIをインストールできます: これにより、Quasarのコマンドをプロジェクトの外からも使用できるようになります。 依存ライブラリをインストール 新しく作成したプロジェクトフォルダに移動し依存ライブラリをインストーします。 次に、以下のコマンドで開発用サーバーを起動します。グローバルCLIをインストールしている場合は: グローバルCLIをインストールしていない場合は、以下のコマンドで実行できます: このコマンドを実行すると、開発用サーバーが新しいアプリケーションをコンパイルし、完了すると新しいアプリがブラウザで開きます。これで開発を開始できます!お気に入りのIDEやコードエディターを使用してアプリを開発できます。 これでデフォルトのQuasarアプリが起動しました! ファイル構成 Quasar Frameworkのデフォルトのフォルダ構成は、クエーサーアプリケーションの基本的な構造を定義します。以下は一般的なQuasarプロジェクトのデフォルトのフォルダ構造の概要です: これらのデフォルトのフォルダ構造は、Quasarアプリケーションの基本的な構造を提供し、効率的な開発をサポートします。ただし、プロジェクトの要件に応じてカスタマイズできます。 コンポーネントを使ってみる では参考までにボタンのコンポーネントを使ってみます。 メインページになっているsrc/pages/Index.vueを下記のように変えましょう。 これでボタンのコンポーネントが表示されましたね。 これらのコンポーネントはグローバルにインポートされているので各.vueファイルでインポートする必要がありません。 ちなみにこのscriptの書き方がちょっと古いので必要に応じてscript setupに書き変えることをお勧めします。 次にテーブルのコンポーネントを使ってみましょう。 このように簡単で軽量なウェブアプリができてしまいます! 慣れてきたらモバイルアプリにも挑戦してみたいですね。