将js导入Vue项目

Posted

技术标签:

【中文标题】将js导入Vue项目【英文标题】:Importing js to Vue project 【发布时间】:2020-11-17 08:02:39 【问题描述】:

我正在考虑使用 Vuefire 来更轻松地将 Firestore 与我的 Vue 项目集成。在阅读getting started documentation 时,他们让您创建一个 db.js 文件,以便您可以“方便地”将其导入项目中的任何位置。

import firebase from 'firebase/app'
import 'firebase/firestore'

// Get a Firestore instance
export const db = firebase
  .initializeApp( projectId: 'MY PROJECT ID' )
  .firestore()

// Export types that exists in Firestore
// This is not always necessary, but it's used in other examples
const  Timestamp, GeoPoint  = firebase.firestore
export  Timestamp, GeoPoint 

// if using Firebase JS SDK < 5.8.0
db.settings( timestampsInSnapshots: true )

在Binding page 的下一步中,他们显示您可以将该模块导入“RecentDocuments”组件中

// RecentDocuments.vue
import  db  from './db'

export default 
  data() 
    return 
      documents: [],
    
  ,

  firestore: 
    documents: db.collection('documents'),
  ,

如果我将同一个 db.js 文件导入另一个组件,它不会创建 firebase firestore 对象的另一个实例,因为它基本上是再次调用 .initializeApp 吗?

// SomeOtherComponent.vue
import  db  from './db'

export default 
  ...

还是我不了解导入的工作原理?

【问题讨论】:

【参考方案1】:

不,不会。导入只发生一次。来自每个进口的出口实际上是单件。您应该能够通过简单地将日志消息添加到导入来验证这一点。

【讨论】:

谢谢道格。那么本文档中是否根本不需要“让实例”?:auth0.com/docs/quickstart/spa/vuejs/… 如果您还有其他问题,我建议您将其与您关心的代码分开发布。 ***.com/questions/63125529/…

以上是关于将js导入Vue项目的主要内容,如果未能解决你的问题,请参考以下文章

如何将axios全局导入vue.js项目[重复]

将资源包导入 vue 项目

带有 Vue CLI 3 的项目的导入路径上的 WebStorm 中的 Intellisense(代码完成辅助)不适用于 Vue.js

将 nativescript-oauth2 导入 nativescript vue 项目时出错

vue项目导入本地json文件的方法

Vue.js 3:无法导入 Vue 全局对象