いろいろなQiita記事を読みながら「なんとなく理解した」レベルを超えられなさそうだったので、一念発起してちゃんとドキュメントを見ようと決意。

Vueを使うので、「Firebase を JavaScript プロジェクトに追加する」スタートガイドを読むことにする。
https://firebase.google.com/docs/web/setup

アプリに Firebase を追加する

まずはFirebaseのプロジェクトを追加する必要がある。なのでFirebaseコンソールでプロジェクトを追加した。

作成したプロジェクトの概要ページで、firebaseをアプリに追加するために必須の設定コードのスニペットを取得する。

<script src="https://www.gstatic.com/firebasejs/5.0.4/firebase.js"></script>
<script>
  // Initialize Firebase
  // TODO: Replace with your project's customized code snippet
  var config = {
    apiKey: "<API_KEY>",
    authDomain: "<PROJECT_ID>.firebaseapp.com",
    databaseURL: "https://<DATABASE_NAME>.firebaseio.com",
    projectId: "<PROJECT_ID>",
    storageBucket: "<BUCKET>.appspot.com",
    messagingSenderId: "<SENDER_ID>",
  };
  firebase.initializeApp(config);
</script>

このあと、利用したいコンポーネントごとにjsファイルをCDNからインクルードしてくる。
たとえば認証系の処理をやりたいならfirebase-auth.jsとか。

開発用ローカルウェブサーバーを実行する

FirebaseのCLI（firebase-tools）を利用して、firebaseのローカルサーバを実行することができる。
まずはCLIをインストールする。

$ npm install --global firebase-tools
$ firebase --verison
> 4.2.1
$ firebase login
> ? Allow Firebase to collect anonymous CLI usage and error reporting information? # 匿名の情報収集を許可するかどうか

> Visit this URL on any device to log in: # 下記URLに飛んでログインする
> https://accounts.google.com/o/oauth2/auth?client_id=******

つぎにinitコマンドを打って、開発中のアプリケーションをFirebaseに関連づける。

FIrebaseのどの機能を利用するか聞かれるので、今回は4番目の「Hosting」を選択（spaceで有効）してEnterをクリック。

なおinitコマンドは、カレントディレクトリ上で実行されるので、あらかじめアプリのプロジェクトに移動しておくこと。

$ cd {アプリのディレクトリ}
$ firebase init    # Generate a firebase.json (REQUIRED)
$ $ firebase init
> ? Which Firebase CLI features do you want to setup for this folder? Press Space to select features, then Enter to confirm your choices.
>  ◯ Database: Deploy Firebase Realtime Database Rules
>  ◯ Firestore: Deploy rules and create indexes for Firestore
>  ◯ Functions: Configure and deploy Cloud Functions
> ❯● Hosting: Configure and deploy Firebase Hosting sites
>  ◯ Storage: Deploy Cloud Storage security rules

つぎにこのアプリケーションに割り当てるFirebaseプロジェクトを選択する。

今回はすでにコンソール上から作っているので、追加したFirebaseプロジェクトを選択する

> ? Select a default Firebase project for this directory: (Use arrow keys)
>   [don't setup a default project]
>   Firebase Demo Project (fir-demo-project)
> ❯ {追加されたFirebaseプロジェクト}
>   [create a new project]**strong text**

つぎに公開ディレクトリを指定することができる。

未指定のままEnterを押すと、シングルページアプリケーションとして、すべてのアクセスがpublic/index.htmlにrewriteされるように設定される。

> Your public directory is the folder (relative to your project directory) that
will contain Hosting assets to be uploaded with firebase deploy. If you
have a build process for your assets, use your build's output directory.

> ? What do you want to use as your public directory? (public)
> ? Configure as a single-page app (rewrite all urls to /index.html)? (y/N)

ここまで終わると、いよいよローカルサーバを開始できる。

オプション未指定の場合はlocalhost:5000で開始されるよう。

firebase serve

http://localhost:5000にアクセスすると、次のようなページになるはず。

なおCtrl + Cで、サイト停止が可能。

初期設定の追加

public/index.htmlの</style>直下に、さきほど取得した設定コードのスニペットを貼り付ける。

ちなみにindex.htmlにAPI Keyなどを貼り付けてしまっていいのか不安に思ったが、どうやらcredentials（認証情報）が知られないかぎりは安全なよう。このあたりは、ちゃんと個々で調べるべきだろう。

関連記事: FirebaseのApiKeyとAppIDはHTMLソースにコピペしてもセキュア

このあと

このindex.htmlを修正しながらFirebaseの機能群を利用していってみようと思います。