VueフレームワークのQuasar frameworkのインストールからVueファイルの作成までの手順です。
Quasar frameworkの始め方
- Node.jsの設定
- 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の場合は次のことをする必要があります。
- Homebrewのインストール
- nodebrewのインストール
- Node.jsのインストール
これらのやり方は以下記事が詳しくてわかりやすいです。
https://qiita.com/kyosuke5_20/items/c5f68fc9d89b84c0df09
この後は、
- 自分の環境にあるNode.jsのバージョンを確認
- Node.jsのインストール可能なバージョンを確認
- 必要なバージョンをインストール
- インストールした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.0currentにバージョンが表示されていれば、それが現在使用中のバージョンという意味です。
もしくは
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を使ったプロジェクトの作成が完了です。