業務でフロントエンドの改修にてのVue.js・Quasar を扱っているので、ハマったことや苦戦したことなどについて、記録がてらこちらで更新していきたいと思います。

今回は、第１回としてQuasar Frameworkについてです。

Quasar Frameworkについて

公式サイトによると、

・Vue.jsをベースとしている
・マテリアルガイドラインに準拠したUIが豊富
　CSSも容易に変更可能
・以下をサポートしており、Webサイト/アプリをすばやく作成できる
　SPA、SSR、PWA、モバイルアプリ、デスクトップアプリ、ブラウザー拡張機能
・QuasarCLIを使用して簡単にプロジェクトを作成できる。

以上が特徴です。

モバイル・デスクトップ両方に対応したアプリケーション・サイトを素早く作れてしまうフレームワークです。

では、公式のQuasar CLI Installationを参照してプロジェクトを作成してみます。

作業履歴とコマンドを以下に記載します。以下を実行するとコマンドを実行したフォルダ配下にプロジェクトが作成されます。※Node.jsをインストール済みです。

npm install -g @quasar/cli
quasar create <folder_name>
___
/ _ \ _   _  __ _ ___  __ _ _ __
| | | | | | |/ _` / __|/ _` | '__|
| |_| | |_| | (_| \__ \ (_| | |
\__\_\\__,_|\__,_|___/\__,_|_|

? Project name (internal usage for dev) practice
? Project product name (must start with letter if building mobile apps) Quasar App
? Project description A Quasar Framework app
? Author <名前> <名前/develo@>
? Pick your favorite CSS preprocessor: (can be changed later) None
? Pick a Quasar components & directives import strategy: (can be changed later) Auto import
? Check the features needed for your project: ESLint (recommended), Vuex, Axios, Vue-i18n, IE11 support
? Pick an ESLint preset: Standard
? Continue to install project dependencies after the project has been created? (recommended) NPM

下図が作成後に出来る画面です。

次回は、Vue.jsを使用したフレームワークの説明で頻繁に目にするライフサイクルについてまとめたいとおもいます。

著者