Question

我使用nativescript-vue制作了我的第一个应用程序，并且想知道如何将firebase连接到我的应用程序。我的想法是从实时Firebase数据库添加和读取数据。

我遵循了一些指南，并进行了以下操作：
1）我用以下命令安装了firebase：“ tns plugin add nativescript-plugin-firebase”。
2）然后，我从我的Firebase项目中配置并下载了google-services.json文件。

这是main.js文件的内容。

import Vue from 'nativescript-vue'
import App from './components/App'
import firebase from 'nativescript-plugin-firebase'

import VueDevtools from 'nativescript-vue-devtools'

if(TNS_ENV !== 'production') {
  Vue.use(VueDevtools)
}
// Prints Vue logs when --env.production is *NOT* set while building
Vue.config.silent = (TNS_ENV === 'production')

firebase
  .init()
  .then(() => console.log('Firebase initialised!'))
  .catch(error => console.log(`Error: ${error}`));

new Vue({

  render: h => h('frame', [h(App)])
}).$start()

这是App.vue文件的内容。

<template>
    <Page>
        <ActionBar title="App demo"/>
        <GridLayout columns="*" rows="*">
            <Label class="message" :text="msg" col="0" row="0"/>
        </GridLayout>

        <button @tap="test()">Push</button>
    </Page>
</template>

<script>
import firebase from 'nativescript-plugin-firebase';

  export default {
    data() {
      return {
        msg: 'Hello World!'
      }
    },
    methods: {
      test(){
        alert("click");
        //FIREBASE PUSH 
    }
    }
  }
</script>

<style scoped>
    ActionBar {
        background-color: #1F2327;
        color: #ffffff;
    }

    .message {
        vertical-align: center;
        text-align: center;
        font-size: 20;
        color: #333333;
    }
</style>

我尝试使用此代码，但是它不起作用。

 firebase.push(
      '/users',
      {
        'first': 'Eddy',
        'last': 'Verbruggen',
        'birthYear': 1977,
        'isMale': true,
        'address': {
          'street': 'foostreet',
          'number': 123
        }
      }
  ).then(
      function (result) {
        console.log("created key: " + result.key);
      }
  );

如何为Firebase配置nativescript-vue应用？

0 个答案: