哇！时事通讯App真的火爆了，人人都爱在这里看热门新闻和话题。手机应用功能真强大，让我们随时随地了解世界！想开发个好用、快速又靠谱的时事通讯app怎么办？别担心，我有妙招——用Vue.js和Firebase Cloud Firestore。这篇文章就教你怎么用这两个神器做出一个超级棒的时事通讯应用。

一、Firebase Cloud Firestore简介

你听过Firebase云存储库？这个东西就是个很好用的云数据库，特别适合开发跨平台软件。它的特点是NoSQL文档格式和Vue.js结合，真的很搭。实际用起来，优势还是挺多的：实时同步，一更新就能看到；自增空间，不愁不够装；还有安全防护，保证数据安全无忧。有了Firebase，你就可以轻松搞定数据，而且还可以随时随地实时同步！

首先装上最新的Vue CLI，然后赶紧搞个Vue项目出来。搞定之后，用命令行把Firebase和Cloud Firestore装好，就能开始你乐在其中的开发了！

二、设置Firebase项目

立马动手！打开Firebase管理平台新建项目，再选个添加Firebase到网页程序，按着步骤走下来就能得到一份配置文件。记得保存好，取名叫config.js，这样以后在Vue项目里用起来就方便多了。

npm install firebase
npm install @firebase/firestore

搞定Firebase和云存储Firestore的连接，就是我们接下来要干的第三件事。

首先，在我们的Vue项目主页main.js那儿加点儿代码把Firebase导入~还得弄好连接到Cloud Firestore。不搞定这步可不行，不然咱的小程序跟数据库可是不能愉快地混一块的

四、创建Vue组件

import firebase from 'firebase/app'
import 'firebase/firestore'
import config from './config'
firebase.initializeApp(config)
const db = firebase.firestore()

咱们来动动手指头，利用Vue组件搞定实时新闻应用。首先，搞定Articles组件和AddArticle组件这两个小家伙就行了哈。

（1）文章模块，这个地方就是让你看到我们发表过的所有文章~它会实时更新Cloud Firestore中的文章集合动态，然后把新的文章信息收录到articles数组里。最后，只要在模板上点一下，就能看到每篇文章的标题和内容~

（2）赶紧用上这个叫做Add Article的小部件！啥都不用想直接点击addArticle，你新鲜出炉的文章就能顺利进入articles集合！而且，输入框也会很快恢复到原先的状态哦～

  

    
时事通讯应用
    

      

        
{{ article.title }}
        
{{ article.content }}
      
    
  


export default {
  data() {
    return {
      articles: []
    }
  },
  mounted() {
    db.collection('articles').onSnapshot((snapshot) => {
      this.articles = snapshot.docs.map((doc) => doc.data())
    })
  }
}

五、在Vue App中使用组件

首先，得把Articles和AddArticle这俩放 App.vue里，才能在模板上看得到。然后就可以用它们搞出我们的新闻推送页~

六、运行应用程序

你只需要双击开始这个开发服务器指令，然后在浏览器中输上相应的网站地址，就能够直接观察到这个时事通讯APP的使用情况啦!然后你还能浏览一下之前发布过的各种文章，或者干脆自己试试手，创作出新的内容哦～

  

    
添加新文章
    
    
    添加
  


export default {
  data() {
    return {
      title: '',
      content: ''
    }
  },
  methods: {
    addArticle() {
      if (this.title && this.content) {
        db.collection('articles').add({
          title: this.title,
          content: this.content
        })
        this.title = ''
        this.content = ''
      }
    }
  }
}

掌握了Vue.js和Firebase Cloud Firestore，就可以轻松搞定炫酷的即时聊天APP！Vue.js帮你搭起骨架，而Firebase Cloud Firestore则提供了强大的扩容性、实时更新和超级安全等特性。做得溜，用得自然能吸引更多用户~

今天教你用Vue.js和Firebase做一个新闻提醒APP哟~希望对你有所帮助，加油，做出更好的手机应用！

  

    
    
  


import Articles from './components/Articles.vue'
import AddArticle from './components/AddArticle.vue'
export default {
  components: {
    Articles,
    AddArticle
  }
}