Quasar frameworkの始め方(Vueフレームワーク)

2021年4月25日Vue.js

VueフレームワークのQuasar frameworkのインストールからVueファイルの作成までの手順です。

Quasar frameworkの始め方

  1. Node.jsの設定
  2. Quasar CLIの設定

という二段階です。
Node.jsの設定に関しては適宜下を確認しましょう。
https://quasar.dev/quasar-cli/installation

Node.jsのインストールができており、現在のバージョンが問題なければ下の章をを飛ばしてください。

Node.jsの設定

  • Do not use any Node version higher than 14+
  • Do not use uneven versions of Node i.e. 13, 15, etc.

上のようなWARNINGがあるので、そのバージョンのNode.jsを使っている場合はバージョンの変更を行います。

Node.jsを必要なバージョンに切り替えるために必要なこと

Node.jsを準備します。
必要なバージョンに切り替えるためには、Macの場合は次のことをする必要があります。

  1. Homebrewのインストール
  2. nodebrewのインストール
  3. Node.jsのインストール

これらのやり方は以下記事が詳しくてわかりやすいです。
https://qiita.com/kyosuke5_20/items/c5f68fc9d89b84c0df09

この後は、

  1. 自分の環境にあるNode.jsのバージョンを確認
  2. Node.jsのインストール可能なバージョンを確認
  3. 必要なバージョンをインストール
  4. インストールしたNode.jsを有効化

という手順になります。

自分の環境にあるNode.jsのバージョン確認

上で確認したQuasarのインストレーションページにかかれているNode.jsのバージョンを使っている場合、変更します。

nodebrew ls
v11.0.0
current: none

といったバージョンを確認できます。
上がインストールされているバージョンで、下のcurrentが現在使用中のバージョンです。
有効化していない場合は、noneになります。

Node.jsのインストール可能なバージョンを確認

nodebrew ls-remote

でインストール可能な Node.js のバージョンを確認することができます。

必要なバージョンをインストール

上でバージョンを確認したら、必要なバージョンをインストールします。

nodebrew install バージョン

よく使うコマンド例

nodebrew install v14.00.0 #v14.00.0をインストール
nodebrew install latest	#最新版をインストール
nodebrew install stable	#安定版をインストール
nodebrew install v14.10	#v14.10の最新版をインストール

Node.js の有効化

インストールした後、currentに適用するためには、有効化する必要があります。

nodebrew use バージョン

で有効化できます。
例としては、

nodebrew use v14.0.0

といった感じです。
有効化できているかの確認方法は、上で lsコマンドか-vを使います。

nodebrew ls
v11.0.0
v14.0.0
current: v14.0.0

currentにバージョンが表示されていれば、それが現在使用中のバージョンという意味です。

もしくは

node -v 
v14.0.0

と希望のバージョンが返されれば設定できています。

Quasar CLIの設定

公式サイトにアクセスします。
https://quasar.dev/start/pick-quasar-flavour

次の3つの方法があります。

  • UMD/StandaloneーCDN経由で使いたいとき
  • Quasar CLI ー一番おすすめ
  • Vue CLI 3 pluginーどうしてもVue CLIが使いたいとき

上の公式サイトでそれぞれ何ができるのか比較表があります。
Quasar CLIを使ったほうがいろいろできることが増えるので、
公式サイトの言う通り、特に理由がない限りはQuasar CLIを使うのがおすすめです。
ということでここではQuasar CLIを使った方法を記述します。

Quasar cliをインストール

yarn global add @quasar/cli 
#or
npm install -g @quasar/cli

でインストールします。
グローバルにインストールするので、一度実行したら次からは不要です。

___
/ _ \ _ _ __ _ ___ __ _ _ __
| | | | | | |/ _` / __|/ _` | '__|
| |_| | |_| | (_| \__ \ (_| | |
\__\_\\__,_|\__,_|___/\__,_|_|

と出たら、インストール完了です。

Quasarのプロジェクトを作成する

quasar create フォルダ名

と入力すると次のような質問を聞かれます。

? Project name (internal usage for dev) プロジェクト名
? Project product name (must start with letter if building mobile apps) プロジェクト製品名
? Project description プロジェクトの詳細
? Author 名前(メールアドレス)
? Pick your favorite CSS preprocessor: (can be changed later) SCSSなど
? Pick a Quasar components & directives import strategy: (can be changed later) Auto import
? Check the features needed for your project: Axiosなど
? Continue to install project dependencies after the project has been created? (recommended) NPMかyarn

これでQuasarを使ったプロジェクトの作成が完了です。