【Vue】【Quasar】Quasarでアプリを作る

qkuronekop.hatenablog.jp

前回、firebaseにhostingしたアプリをデフォルト状態からちょっとづつ修正して行こうと思います。

デフォルト状態だと、MyLayout.vueの内容が最初の画面として表示されています。
これを別のファイルに差し替えてみようと思います。

src/layouts/TopPage.vue

ここに新しいファイルを作ります。(名前は任意)
MyLayout.vueを参考に、ツールバーを作ってみます。

TopPage.vue

<template>
<q-layout view="lHh Lpr lFf">
    <q-header elevated>
        <q-toolbar-title>
            タイトル
        </q-toolbar-title>
    </q-header>>
</q-layout>
</template>

ツールバーの色もデフォルトから変更したいので、ここのファイルを変えます。

src/css/quasar.variables.styl

$primary   = #ff6f00
$secondary = #ffe57f
$accent    = #c43e00

$positive  = #21BA45
$negative  = #C10015
$info      = #31CCEC
$warning   = #F2C037

とりあえず上３つだけ変えてみました。
ツールバーの色はprimaryを変更します。

src/router/routes.js

このファイルを開いて、ルートのコンポーネントを変更します。

const routes = [
  {
    path: '/',
    component: () => import('layouts/TopPage.vue'),
    children: [
      { path: '', component: () => import('pages/Index.vue') },
    ],
  },
];

// Always leave this as last one
if (process.env.MODE !== 'ssr') {
  routes.push({
    path: '*',
    component: () => import('pages/Error404.vue'),
  });
}

export default routes;

これで、最初に開くページが差し代わりました。

次は認証機能を作ろうと思います。

qkuronekop.hatenablog.jp