通过vue-cli（webpack）在vuejs2应用程序中使用Firebase

Question

我是使用vue-cli Webpack模板的新手，我想将firebase用作vueapp的数据库，我已经完成了将Firebase导入到我的应用程序中

main.js

//imported rest all required packages just dint mention here
import * as firebase from 'firebase'

let config = {
apiKey: " - XXXXXXXXCXCC",
authDomain: "XXXXXXXXX",
databaseURL: "XXXXXCCCX",
storageBucket: "XXXXXXXXXXX",
messagingSenderId: "XXXXXXXXXX"
};

firebase.initializeApp(config);

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

现在在我的signup.vue文件中，我必须再次导入以下内容

import * as firebase from 'firebase'

为了在我的方法中使用以下内容

firebase.auth().createUserWithEmailAndPassword(uEmail, uPassword).catch(function(error) {
                // Handle Errors here.
                var errorCode = error.code;
                var errorMessage = error.message;
                // ...
            });

我的问题是我必须进口吗

import * as firebase from 'firebase'

无处不在（即在alll vue组件中使用脚本标签来使用与Firebase相关的方法，例如

firebase.auth()
firebase.database()
firebase.storage()

或者我可以将其导入一个中心位置，并firebase.method() in any vue component file when needed使用firebase.method() in any vue component file when needed

Answer 1

你可以附上firebase到Vue.prototype ：

import * as firebase from 'firebase'

let config = {
  //
}

Vue.prototype.$firebase = firebase.initializeApp(config)

new Vue({
  //
})

然后，将其用于这样的组件：

this.$firebase.database()

Answer 2

如果您只想导入一次，则只需在main.js ：

import * as firebase from 'firebase'

window.firebase = firebase

window对象是网页的全局对象，通常以这种方式使用它。