欢迎使用您的Vite，Vue Project的Firebase Emulator集成的博客文章！这篇文章是我们关于同一主题的视频的伴侣，您可以在下面找到链接。
如果您一直在努力进行测试和迭代您的Firebase项目，不断不得不推动实时环境以查看您的变化，那么您很幸运！在这篇文章中，我们将向您展示如何使用Ionic Capacitor将Firebase Emulator整合到Vite，Vue项目中，从而使您可以从本地机器的舒适度中进行测试，迭代和重置数据。
我们将逐步介绍您的过程，提供终端命令和源代码以支持视频，以便您可以跟随并确切查看其完成方式。但这还不是全部 - 这篇文章是正在进行的有关Firebase集成与Vite，Vue Project的系列的一部分。在即将到来的视频中，我们将向您展示如何将Firebase与VueFire完全集成在一起，VueFire将Firebase与vue.js应用程序无缝集成。
。因此，如果您准备将Firebase项目提升到一个新的水平并简化您的开发过程，请务必查看我们的视频并与此帖子一起关注！
！安装NPM软件包
npm install -g firebase-tools
npm install firebase
登录到您的Firebase帐户
firebase login
初始化当地火基模拟器
firebase init
样本输出
aaronksaunders@Aarons1ProM1Pro vite-vue-cap % firebase init
######## #### ######## ######## ######## ### ###### ########
## ## ## ## ## ## ## ## ## ## ##
###### ## ######## ###### ######## ######### ###### ######
## ## ## ## ## ## ## ## ## ## ##
## #### ## ## ######## ######## ## ## ###### ########
You're about to initialize a Firebase project in this directory:
/Users/aaronksaunders/develop/projects/vite-vue-cap
? Which Firebase features do you want to set up for this directory? Press Space to select
features, then Enter to confirm your choices. Emulators: Set up local emulators for Firebase
products
=== Project Setup
First, let's associate this project directory with a Firebase project.
You can create multiple project aliases by running firebase use --add,
but for now we'll just set up a default project.
? Please select an option: Create a new project
i If you want to create a project in a Google Cloud organization or folder, please use "firebase projects:create" instead, and return to this command when you've created the project.
? Please specify a unique project id (warning: cannot be modified afterward) [6-30 characters]:
testem1
? What would you like to call your project? (defaults to your project ID)
✔ Creating Google Cloud Platform project
✔ Adding Firebase resources to Google Cloud Platform project
🎉🎉🎉 Your Firebase project is ready! 🎉🎉🎉
Project information:
- Project ID: testem1
- Project Name: testem1
Firebase console is available at
https://console.firebase.google.com/project/testem1/overview
i Using project testem1 (testem1)
=== Emulators Setup
? Which Firebase emulators do you want to set up? Press Space to select emulators, then Enter to
confirm your choices. Authentication Emulator, Firestore Emulator
? Which port do you want to use for the auth emulator? 9099
? Which port do you want to use for the firestore emulator? 8080
? Would you like to enable the Emulator UI? Yes
? Which port do you want to use for the Emulator UI (leave empty to use any available port)?
? Would you like to download the emulators now? Yes
i ui: downloading ui-v1.11.4.zip...
i Writing configuration info to firebase.json...
i Writing project information to .firebaserc...
✔ Firebase initialization complete!
启动模拟器
firebase emulators:start
样本输出
aaronksaunders@Aarons1ProM1Pro vite-vue-cap % firebase emulators:start
i emulators: Starting emulators: auth, firestore
⚠ firestore: Did not find a Cloud Firestore rules file specified in a firebase.json config file.
⚠ firestore: The emulator will default to allowing all reads and writes. Learn more about this option: https://firebase.google.com/docs/emulator-suite/install_and_configure#security_rules_configuration.
i firestore: Firestore Emulator logging to firestore-debug.log
✔ firestore: Firestore Emulator UI websocket is running on 9150.
i ui: downloading ui-v1.11.4.zip...
Progress: =========================================================================> (100% of 4MB)
i ui: Removing outdated emulator files: ui-v1.6.5
i ui: Removing outdated emulator files: ui-v1.6.5.zip
i ui: Emulator UI logging to ui-debug.log
┌─────────────────────────────────────────────────────────────┐
│ ✔ All emulators ready! It is now safe to connect your app. │
│ i View Emulator UI at http://127.0.0.1:4000/ │
└─────────────────────────────────────────────────────────────┘
┌────────────────┬────────────────┬─────────────────────────────────┐
│ Emulator │ Host:Port │ View in Emulator UI │
├────────────────┼────────────────┼─────────────────────────────────┤
│ Authentication │ 127.0.0.1:9099 │ http://127.0.0.1:4000/auth │
├────────────────┼────────────────┼─────────────────────────────────┤
│ Firestore │ 127.0.0.1:8080 │ http://127.0.0.1:4000/firestore │
└────────────────┴────────────────┴─────────────────────────────────┘
Emulator Hub running at 127.0.0.1:4400
Other reserved ports: 4500, 9150
Issues? Report them at https://github.com/firebase/firebase-tools/issues and attach the *-debug.log files.
视频中的代码
import { createApp } from "vue";
import "./style.css";
import App from "./App.vue";
import { IonicVue } from "@ionic/vue";
/* Core CSS required for Ionic components to work properly */
import "@ionic/vue/css/core.css";
/* Basic CSS for apps built with Ionic */
import "@ionic/vue/css/normalize.css";
import "@ionic/vue/css/structure.css";
import "@ionic/vue/css/typography.css";
/* Optional CSS utils that can be commented out */
import "@ionic/vue/css/padding.css";
import "@ionic/vue/css/float-elements.css";
import "@ionic/vue/css/text-alignment.css";
import "@ionic/vue/css/text-transformation.css";
import "@ionic/vue/css/flex-utils.css";
import "@ionic/vue/css/display.css";
/* Theme variables */
// import './theme/variables.css';
import router from "./router";
import { initializeApp } from "firebase/app";
import {
getFirestore,
collection,
addDoc,
connectFirestoreEmulator,
serverTimestamp,
query,
getDocs,
orderBy,
} from "firebase/firestore";
const firebaseApp = initializeApp({
projectId: "testem1",
});
console.log("firebaseApp", firebaseApp);
// used for the firestore
export const db = getFirestore(firebaseApp);
console.log("firestore database", db);
// connect the application to the emulator
if (location.hostname === "localhost") {
// Point to the Storage emulator running on localhost.
connectFirestoreEmulator(db, "localhost", 8080);
}
(async () => {
try {
// write a document to database...
const docRef = await addDoc(collection(db, "stuff"), {
name: "aaron",
created_at: serverTimestamp(),
});
console.log("new document", docRef);
// get all of the documents
const queryResult = await getDocs(
query(collection(db, "stuff"), orderBy("created_at", "asc"))
);
// display to console
const dataArray = queryResult.docs.map((d) => {
return { name: d.data().name, when: d.data().created_at.toDate() };
});
console.log("queryResult", dataArray);
} catch (e) {
console.log(e);
}
})();
const app = createApp(App).use(IonicVue).use(router);
router.isReady().then(() => {
app.mount("#app");
});