javascript - firebase 未定义 Vue.js

Question

我是 vue.js 的新手，我正在通过互联网上的文档和教程学习 vue.js，现在我正在尝试使用 Firebase 和 vue.js 制作应用程序，但是当我运行它时，出现错误消息:

-firebase 未定义

但是，我很确定我导入了它。这是我的代码:

ma​​in.js:

import Vue from 'vue'
import App from './App'
import router from './router'
import * as firebase from "firebase"

var config = {
 apiKey: "###########",
 authDomain: "###########",
 databaseURL: "###########",
 projectId: "###########",
 storageBucket: "###########",
 messagingSenderId: "###########"
};
 firebase.initializeApp(config);
 Vue.config.productionTip = false
 /* eslint-disable no-new */
 new Vue({
  el: '#app',
  router,
  firebase,
  components: { App },
  template: '<App/>'
 })

这是我的组件注册:

<template>
<div class="login">
    <h3>Lets Register</h3>
    <input type="email" v-model="email">
    <input type="password" v-model="password">
    <button v-on:click="register">Submit</button>
    <p><router-link to="/Login"> Login? </router-link></p>
</div>

<script>
     export default {
     name: 'Register',
     data () {
        return{
            email: '',
            password: ''
        }
      },
     methods:{
        register : function(){
            firebase.auth().createUserWithEmailAndPassword(this.email,this.password).then(
                function (user) {
                    alert('Account been created')
            },
            function(err){
                alert('opps'+ err.message)
            }
                );
            }
        }
    }

如有任何帮助，我们将不胜感激。

Answer 1

在 main.js 中，只需像这样使用 Vue.use(firebase) 将 firebase 注册为全局，所有组件都可以访问它。

import firebase from 'firebase'
Vue.use(firebase) 

var config = {
 apiKey: "####",
 authDomain: "####",
 databaseURL: "####",
 projectId: "####",
 storageBucket: "####",
 messagingSenderId: "####"
};
firebase.initializeApp(config);

new Vue({
 el: '#app',
 render: h => h(App),
 router : router,
 firebase: firebase,
})

在你的组件中不要忘记像这样导入:

import firebase from 'firebase'