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 次の３つの方法があります。
  • 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を使ったプロジェクトの作成が完了です。

Vue.jsQuasar

Posted by devsakaso