第一步：准备工作

想做新闻聊天APP？别着急，慢慢来！赶紧去注册个Firebase账号，登录上去！安装好Firebase后，你的APP会变得超级棒，升级效果一目了然！然后在Firebase的控制台新建个项目就好了！搞定之后，你就能得到项目ID、API密码和数据库URL这些关键信息。

第二步：初始化Vue项目

别想太多，赶紧开VUE项目！用Vue CLI这个神器，命令行搞定。接着会蹦出个新项目，赶紧进去摸索一下。别忘了装上Firebase和Firebase Cloud Firestore，这样就能和你的后端无缝对接。

第三步：连接Firebase

vue create news-app

搞定基本功后，就该搞点大动作了，那就是把热门的Firebase加到咱的项目里头去。首先，在项目文件夹最里面建个叫“firebase.js”新窝，给它填点儿Firebase信息。接着，就让 Firebase和咱们来个亲密接触！别忘了把firebase.js挪到vue的主战场main.js文件中，这样它就能成为我们的得力助手。

cd news-app

第四步：创建Vue组件

npm install firebase vuefire

开工先把”src/components”这个位置找出来，这可是存放Vue组件的大本营哇。紧接着，创建一个名字叫做”NewsList.vue”的文件。它可主要负责新闻列表的动态呈现。做好这些后，别忘记去瞅瞅App.vue里有没有一个叫NewsList的组件呀？赶紧给加上，新闻内容一目了然

步骤5：搞个火炉云端Firestore数据库吧

// firebase.js
import firebase from 'firebase/app'
import 'firebase/firestore'
const firebaseConfig = {
  apiKey: 'YOUR_API_KEY',
  authDomain: 'YOUR_AUTH_DOMAIN',
  databaseURL: 'YOUR_DATABASE_URL',
  projectId: 'YOUR_PROJECT_ID',
  storageBucket: 'YOUR_STORAGE_BUCKET',
  messagingSenderId: 'YOUR_MESSAGING_SENDER_ID',
  appId: 'YOUR_APP_ID'
}
// 初始化Firebase
firebase.initializeApp(firebaseConfig)
// 导出Firebase实例
export const db = firebase.firestore()

搞定了Vue组件，咱们来学学用Firebase云存储保存聊天记录。首先进入Firebase后台，找到Cloud Firestore部分，创建一个叫”新闻”的新数据库。接着在里面添加一个”文章”的东西，填写上标题、正文和发布日期这些基本信息即可。

// main.js
import Vue from 'vue'
import App from './App.vue'
import './firebase'
new Vue({
  render: h => h(App)
}).$mount('#app')

搞定了！接下来咱们搞个在线聊天神器。多发几个消息试试效果，然后直接敲入localhost:8080这个网址瞧瞧成果。这时候简单实用的即时聊天工具就出炉！

扩展与优化

看完这篇文章，你就可以轻松搞定一个简单的新闻通讯APP！想要做得更好玩儿？比如真人验证、更快的新闻更新速度或漂亮的界面设计？那就得多学习多练习。只要你用心去做，学会使用Vue和Firebase Cloud Firestore，一定能做出更厉害、更实用的应用来！

  

    
时事通讯列表
    

      
{{ news.title }}
    
  


import { db } from '../firebase'
export default {
  data() {
    return {
      newsList: []
    }
  },
  created() {
    // 获取并监听时事通讯列表
    db.collection('news')
      .orderBy('timestamp', 'desc')
      .onSnapshot(querySnapshot => {
        this.newsList = querySnapshot.docs.map(doc => doc.data())
      })
  }
}

新手不用怕，按照这个步骤学习Vue和Firebase云存储，轻松搞定新闻通讯app。遇到不懂的地方就问，多看看教程，大胆去试，你也能成为大神！

  

    
  


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