通過VUE-CLI在vuejs2應用程序中使用火力點（的WebPack）

Question

我是新來使用VUE-CLI 一個的WebPack模板 我想用火力點作爲我的數據庫爲vueapp 我已經這樣做了導入火力地堡到我應用

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.auth() 
firebase.database() 
firebase.storage() 

或者我可以導入它在一箇中心位置，並使用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對象是全球的網頁，這是正常的做法是使用這種方式。