省エネエンジニア

Flutter、vue.js修行中。

【Vue】Quasarで作ったアプリをfirebase hostingにデプロイする

近頃、Vue.jsが気になっていて少しいじってみたので記録。

目標

  • Quasarでアプリを作る
  • firebase にhostingする

Vueのインストール

npm i vue-cli -g

## quasarのインストール

npm install -g @quasar/cli

プロジェクトを作成します

$ quasar create <folder_name>

? Project name (internal usage for dev) <praise>
? Project product name (official name; must start with a letter if you will build mobile apps) <Quasar App>
? Project description <A Quasar Framework app>
? Author <qkuronekop>
? Check the features needed for your project: (Press <space> to select, <a> to toggle all, <i> to invert selection)<ESLint, Vuex, Axios, Vue
-i18n, IE11 support>
? Pick an ESLint preset <Airbnb>
? Cordova id (disregard if not building mobile apps) <dev.qkuronekop.praise>
? Should we run `npm install` for you after the project has been created? (recommended) <NPM>

プロジェクトを作ると色々聞かれますので答えていってください。
<>内は私の場合なので適宜変更してください。

動かす

では、早速出来立てのアプリを動かしてみましょう。

$ cd <folder_name>
$ quasar dev

http://localhost:8080/でアプリが立ち上がります。

f:id:qkuroneko:20190808094209p:plain:w320

なにもいじってない状態だとこんな感じ。

ビルドする

quasar build

buildするとdistというフォルダが作られますのでdeployする前に一度buildしておきます。

Firebaseにhostingする

  • 先にfirebase consoleでプロジェクトを作成しておいてください。
$ firebase init hosting

↑のコマンドを実行すると、プロジェクトを選択するように促されますので、ホスティングしたいプロジェクトを選択します。

? What do you want to use as your public directory? dist/spa
? Configure as a single-page app (rewrite all urls to /index.html)? No
  • 何か聞かれるので、↑のように答えます。

上手くdeployができればfirebase consoleのHostingの項目を開くとデフォルトのURLが発行されていますので、そこから先ほどdeployしたページを見ることができます。

次はUIをいじってみます。

qkuronekop.hatenablog.jp