近頃、Vue.jsが気になっていて少しいじってみたので記録。
目標
- Quasarでアプリを作る
- firebase にhostingする
Vueのインストール
- Noade.jsをインストールします (https://nodejs.org/en/)
- vue-cli をインストールします
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/でアプリが立ち上がります。
なにもいじってない状態だとこんな感じ。
ビルドする
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をいじってみます。
