4
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

Vue.jsでFirebaseを始めよう 2.Vueプロジェクト準備編

Last updated at Posted at 2017-10-30

vueのプロジェクトを作成する。今回はvue-cliを使うことにした。vue-cliをインストールしてない人はこれを

npm install -g vue-cli

vue-cliでプロジェクトを作成

フロント用vueプロジェクト「vue-fire」を作成する。最低限しか使わないからオプションは全部「No」にする。
pic_1.png

いつもの

cd vue-fire
npm install

プロジェクトを起動

npm run dev

下の画面が出たら成功。
vue-fire.png

フロント用firebase設定コードを取得

「ウェブアプリにFirebaseを追加」を押して
fire-vue_–_概要_–_Firebase_console.png

コードをHTML下部に貼り付ける

fire-vue_–_概要_–_Firebase_console.png

App.vueを空にしておく

<template>
  <div id="app">

  </div>
</template>

<script>

export default {
  name: 'app',
  components: {

  }
}
</script>

<style>

</style>

これで準備完了だ。次はFirebaseと連携しながらvueをコーディングしていく。
Vue.jsでFirebaseを始めよう 3.ユーザーログイン編

4
2
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
4
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?