Vue CLI3のプロジェクトをFirebaseで公開するまでにやったこと

Vue CLIを開発したプロジェクトをFirebaseで公開するために以下のことを行いました。

これからVue.jsをやってみたい人の
学習の手助けになれば幸いです。

手順は難しいものでなく
公式サイトで紹介されている手順通りにやれば大丈夫でした。

やったこと

Firebase のプロジェクトを作成する。

1. Firebaseの公式サイトにGoogleアカウントでログインする。
2. Firebaseのコンソールでプロジェクトを新規作成する。

https://console.firebase.google.com/

Firebase CLIをインストールする

npm install -g firebase-tools

Firebase CLIからFirebaseにログイン

firebase login
// chromeが立ち上がる

Vue.jsのプロジェクトディレクトリでfirebase initを実行

cd my-project
firebase init

firebase initで色々指定を求められましたがVue CLIの公式サイトを参考に以下を選択しました

• 最初のラジオボタンみたいな選択ではhostingを選択
• 公開ディレクトリをdistを指定（デフォルトはpublic)
• プロジェクトは作成したものを指定

firebase.jsonを編集

{
  "hosting": {
    "rewrites": [
      {
        "source": "**",
        "destination": "/index.html"
      }
    ]
  }
}

Vueプロジェクトをビルド

npm run build

Firebaseのプロジェクトにデプロイ

firebase deploy --only hosting

コマンド実行結果に表示されるURLをアクセスしたら
ローカル環境と同じ画面を表示できました。

参考

VueCLIの公式サイト
cli.vuejs.org

vue init コマンド実行時の指定や
firebase.jsonの内容を参考にしました。

vue-router公式サイト
router.vuejs.org

vue routerがhistoryモードでのFirebaseの設定を確認

次回

残りの画面を仕上げる

Vue CLI3のプロジェクトにportfolioのページを作る

前回の続きです。

これからVue.jsをやってみたい人の
学習の手助けになれば幸いです。

簡単ですが
ポートフォリオサイトをAboutページを作成してみました。

components/About.vue

<template>
  <div class="about">
    <h1 class="title">自己紹介</h1>
    <div class="container">
      <div class="row">
        <div class="col-sm-4">
          <img src="../assets/about.jpg" width="300px" alt="">
        </div>
        <div class="col-sm-6">
          <dl>
            <dt>名前</dt>
            <dd>{{ name }}</dd>
            <dt>住まい</dt>
            <dd>{{ address }}</dd>
            <dt>スキル</dt>
            <dd>{{ skill }}</dd>
            <dt>SNS</dt>
            <dd>
              <ul>
                <li v-for='item in sns'>
                  {{ item.term}}: <a :href=item.href>{{ item.description }}</a>
                </li>
              </ul>
            </dd>
          </dl>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data () {
    return {
      name: 'Name',
      address: 'Address',
      skill: 'Skill',
      sns:  [
             {term: 'email', href: 'mailto:xxx@gmail.com', description: 'xxx'},
             {term: 'twitter', href: 'https://www.twitter.com/yyy', description: 'yyy'},
             {term: 'GitHub', href: 'https://www.github.com/zzz', description: 'zzz'}
            ]
    }
  }
}
</script>

イメージ

参考
以下を参考にしました

データバインディング
https://v1-jp.vuejs.org/guide/syntax.html
https://vue-loader-v14.vuejs.org/ja/start/spec.html

v-for
https://jp.vuejs.org/v2/guide/list.html

グリッドシステム
https://getbootstrap.com/docs/4.1/layout/grid/

次回

firebaseで公開してみる

Vue CLI3のプロジェクトにBootstrapのJumbotronのページを作る

前回の続きです。

これからVue.jsをやってみたい人の
学習の手助けになれば幸いです。

現在ポートフォリオサイトを制作中です。

そのトップページを見栄え良く見せるために
BootstrapのJumbtronを使ってみました。

components/Home.vue

<template>
  <div class="jumbotron jumbotron-fluid bg-info">
    <div class="container">
      <h1 class="display-4">Welcome to My portfolio</h1>
      <p class="lead">This site is made with Vue.js, Bootstrap.</p>
    </div>
  </div>
</template>

イメージ

参考
Bootstrapの公式サイトを参考にしました。
getbootstrap.com

次回

どれかの画面を作成。

Vue CLI3のプロジェクトにBootstrapのNavbarを作成する

前回の続きです。

hiramatch.hatenablog.com

これからVue.jsをやってみたい人の
学習の手助けになれば幸いです。

現在ポートフォリオサイトを制作中です。
これらの画面上部に表示するナビゲーションバーを作成しました。
スタイルはBootstrapを利用しました。
左の文言にはトップのリンクを貼りました。

ナビゲーションバー

components/Navbar.vue(新規作成)

<template>
  <nav class="navbar navbar-expand-lg navbar-light" style="background-color: #e3f2fd;">
    <router-link class="nav-item nav-link navbar-brand" to="/">portfolio</router-link>
    <div class="collapse navbar-collapse justify-content-end">
      <div class="navbar-nav">
        <router-link class="nav-item nav-link" to="/">Home</router-link>
        <router-link class="nav-item nav-link" to="/about">About</router-link>
        <router-link class="nav-item nav-link" to="/works">Works</router-link>
        <router-link class="nav-item nav-link" to="/contact">Contact</router-link>
      </div>
    </div>
  </nav>
</template>

App.vue

<template>
  <div id="app">
    <navbar></navbar>
    <router-view/>
  </div>
</template>

<script>
  import Navbar from '@/components/Navbar.vue'

  export default {
    components: {
      Navbar
    }
  }
</script>

イメージ

参考
Bootstrapの公式を参考にしました。
getbootstrap.com

次回

どれかの画面を作成。

Vue Router Not Foundページを作成

前回の続きです。
hiramatch.hatenablog.com

これからVue.jsをやってみたい人の
学習の手助けになれば幸いです。

今日からポートフォリオサイトを制作しております。

前回Vue Routerでルーティングを追加しましたが
URLがマッチしない場合のNot Foundページも作成しました。

ルーティング

router.js

import PageNotFound from './components/PageNotFound.vue'

  routes: [
    
   (中略)

  // 一番下に追加
  {
      path: '*',
      name: 'pageNotFound',
      component: PageNotFound
    } 

conponens/PageNotFound.vue

<template>
  <div class="pageNotFound">
    <h1>Page not Found</h1>
  </div>
</template>

以下を参考にしました。

router.vuejs.org

これに相当する日本語版が見つかりませんでした。
技術の公式サイト等では日本語版がある場合でも
英語版も目を通しておいた方がいいと感じました。

次回

ナビゲーションバーを作成します。

Vue Router ルーティングを追加

前回の続きです。
hiramatch.hatenablog.com

これからVue.jsをやってみたい人の
学習の手助けになれば幸いです。

今日からポートフォリオサイトを制作しております。

今回はこれまで作成したプロジェクトに対し
Vue Routerでルーティングを追加しました。

ページ構成

ページは以下にすることにしました。

ページ	ルート
トップ	/
自己紹介	/about
作品一覧	/works
問い合わせ	/contact

ルーティング

router.js

import Home from './components/Home.vue'
import About from './components/About.vue'
import Works from './components/Works.vue'
import Contact from './components/Contact.vue'

  routes: [
    {
      path: '/',
      name: 'home',
      component: Home
    },
    {
      path: '/about',
      name: 'about',
      component: About
    },
    {
      path: '/works',
      name: 'works',
      component: Works
    },
    {
      path: '/contact',
      name: 'contact',
      component: Contact
    },

conponens/Home.vue
conponents/About.vue
components/Works.vue
components/Contact.vue

これらはダミーです。
今後これらを元にページ作成していきます。

<template>
  <div class="xxxx">    // xxxxはhomeなど
    <h1>This is an xxxxx page</h1>
  </div>
</template>

App.vue

   <router-link to="/">Home</router-link> |
   <router-link to="/about">About</router-link> |
   <router-link to="/works">Works</router-link> |
   <router-link to="/contact">Contact</router-link>

ブラウザで確認

http://localhost:8080/

http://localhost:8080/works

次回

404ページを作成します。

Vue Router URLに含まれる#(シャープ)を取り除く

前回の続きです。
hiramatch.hatenablog.com

これからVue.jsをやってみたい人の
学習の手助けになれば幸いです。

URLに#(シャープ)が含まれる

Home, Aboutページ表示するとURLに#(シャープ)が含まれていました。

http://localhost:8080/#/
http://localhost:8080/#/about

原因

Vue Routerの設定が原因でした。
Vue Routerにルーターモードの設定がありました。

API リファレンス | Vue Router

対応

ルーターモードをデフォルトのhashからhistoryに変更しました。

src/router.js

  mode: 'history',       // この行を追加
  routes: [
    {
      path: '/',
      name: 'home',
      component: Home
    },

#(シャープ)なしのURLでアクセスできるようになりました。
http://localhost:8080/
http://localhost:8080/about

historyモードの場合サーバーの設定も必要になりますので
今後サーハ゛にアップする際に対応します。

次回

マイボートフォリオサイトの制作にかかる予定です。