2020-08-01から1ヶ月間の記事一覧

Vue.js 連絡先追加フォームのfirebase連携

以下でフロントを実装した連絡先フォームをfirebaseと連携する kirikko-scondcube.hatenablog.com firebaseセットアップ firebaseコンソールからプロジェクトの追加を選択。 必要事項を選択し、プロジェクトを作成後、webアプリを選択で上記画面が出る。 こ…

Vue js Vuexの使い方とvuexを使用した連絡先追加フォームの作成

Vue cli をインストールする際にデフォルトではなくカスタムを選択し、Vuexを選択すると使える。 storeフォルダのindex.jsのファイルを記述していくことで使う ステイト、ミューテーション、アクション、ゲッターの機能がある デフォルトのコードは以下 src/…

Vue js Vuetify導入について

Vue cliでプロジェクトをcreateする方法はこちら参照 https://qiita.com/H-Toshi/items/2dbd9f72d28815a67924 作成したプロジェクト内で ターミナルを開き $ vue add vuetify でプロジェクトを作成可能 インストールすると作成したフォルダが書き換えられる…

Vue js router-view , router-linkについて

過去記事の続きです。 kirikko-scondcube.hatenablog.com kirikko-scondcube.hatenablog.com 今回最初に操作するのは src/App.vue App.vue <template> <div id="app"> <div id="nav"> <router-link to="/">Home</router-link> | <router-link to="/about">About</router-link> </div> <router-view/> </div> </template> <style lang="scss"> #ap…

Vue js SPAとRouterについて

この記事は前回の記事の続きです。 kirikko-scondcube.hatenablog.com SPAの特徴 SPAはページの描画は一度(初回アクセスが重くなることがある)。 軽快に動作するアプリケーションが作れる。 Vue Routerの機能 ページごとの画面の切り替えをする機能 確認す…