你喜欢用手机看新闻APP吗？别怕，跟着我学习怎么用Vue和Firebase Cloud Firestore做个实时新闻APP。其实不难，快来试试，你也可以自己搞定一个实用又炫酷的新闻神器！

Firebase Cloud Firestore简介

你知道吗？谷歌新出了个牛逼的工具Firebase Cloud Firestore，不仅是数据库，还是实时更新的利器，搜东西飞快准确。赶紧学起来，利用这个神器存取数据，让我们做的新闻通讯应用运行得更加稳当流畅！

首先装上Node.js和npm这俩神器，再把火狐项目搞定，攒个通行证。最后，咱们的Vue项目就出来！在命令行敲几行字，就能轻轻松松搞出个叫”news-app”的Vue项目，顺便还能打开开发服务器~

配置Firebase

先别急，先去Firebase后台搞个新项目~进入“项目设置”之后，选“加应用”那项，记得勾上Web应用！然后按照给的配置代码，直接粘贴到src/main.js文件里就行！

npm install -g @vue/cli
vue create news-app
cd news-app
npm run serve

创建新闻列表组件

接下来，咱们直接上手做那个展示新闻列表的小玩意儿——NewsList.vue~首先去src/components那儿新建一个NewsList.vue文件，然后把代码复制进去，搞定后你会发现App里已经有新闻列表！

创建新闻创建组件

import Vue from 'vue'
import App from './App.vue'
import firebase from 'firebase'
const firebaseConfig = {
  // 将你的Firebase配置信息在这里填入
}
firebase.initializeApp(firebaseConfig)
Vue.config.productionTip = false
new Vue({
  render: h => h(App),
}).$mount('#app')

咱得找个地方发新闻！那就在src/components文件夹里面新建一个名为CreateNews.vue的文件。然后搞点程序代码，让大家更方便地发布新闻！

集成组件到App.vue

终于搞定了，我们只需要把NewsList跟CreateNews这俩程序嵌进App.vue中去，这样就能在APP里愉快地玩耍，所有新闻都能立刻推送到眼前！

  

 
时事新闻
 

   

     {{ news.title }}
   
 
  


import firebase from 'firebase'
export default {
  data() {
 return {
   newsList: []
 }
  },
  mounted() {
 const db = firebase.firestore()
 const newsRef = db.collection('news')
 newsRef.onSnapshot(querySnapshot => {
   let newsList = []
   querySnapshot.forEach(doc => {
     newsList.push({
       id: doc.id,
       title: doc.data().title
     })
   })
   this.newsList = newsList
 })
  }
}

搞定！我们搞出来了个Vue和Firebase搭起来的消息应用，大家可以用它来刷刷新闻，看看有啥新动态哦～

用了Firebase云端Firestore以后，想存什么就存，读起来飞快，真的很方便！App里面都是最新的动态，玩得很开心！希望这段话能帮到你，说不定在编写Vue应用时能给你带来灵感~

  

 
创建新闻
 
   
   
   创建
 
  


import firebase from 'firebase'
export default {
  data() {
 return {
   title: '',
   content: ''
 }
  },
  methods: {
 createNews() {
   const db = firebase.firestore()
   db.collection('news').add({
     title: this.title,
     content: this.content
   })
   .then(() => {
     this.title = ''
     this.content = ''
   })
   .catch(error => console.error(error))
 }
  }
}

告诉你怎么用Vue做个时事通讯应用，还能把消息保存在火狐云里，随时随地都能同步！赶紧去php中文网上看看具体操作，好多教程等你来学。

  

 
 
  


import NewsList from './components/NewsList.vue'
import CreateNews from './components/CreateNews.vue'
export default {
  components: {
 NewsList,
 CreateNews
  }
}