手把手教你用Vue和Firebase打造最新鲜的新闻通讯软件

各位，现在手头的手机真的是寸步不离了。要时刻了解新鲜事儿，装个新闻APP必不可少。开发这种软件，就是在用vue跟Firebase Cloud Firestore这俩搭档搞定。首先说说vue，它是我们都熟悉的JavaScript框架，让网页看起来美美的；然后说说Firebase Cloud Firestore，这可是谷歌家的云端数据库神器，帮我们存储和更新数据。所以说，搞定这两个，就能轻松做出能实时互动、智能推荐新闻的通讯软件！

步骤一：创建Vue项目

首先，在电脑上敲几个命令就搞定！系统会给咱们推荐最合适的选择，想怎么设置都行。接下来就是装个Vue项目了，这可是咱们开发实时通讯App必不可少的步骤！搞定之后，咱们就可以开始搞开发！

vue create smart-news

步骤二：配置Firebase

首要任务就是搞定Firebase哦～只要在他们官网创建新项目并填写必要信息，然后把生成的配置信息复制到你的Vue应用中，最后去main.js文件修改几个设置就好啦～这样做之后，Vue和Firebase就能亲密无间，数据互通咯～

步骤三：创建Firebase集合

import firebase from 'firebase/app'
import 'firebase/firestore'
// 在此处粘贴Firebase配置信息
firebase.initializeApp(firebaseConfig)
export const db = firebase.firestore()

搞定了件大事，那就是在Firebase上建立个用来存文章的”articles”地方咯。首先进到控制台，找到”数据库”这一块，然后新建个数据库，记得选择”生产模式”这样才安全！接着把新库命名为”articles”，轻轻一点就能开始添加内容！

步骤四：添加文章数据

记得在Firestore上整点示例文章用那个控制台直接把字段跟值扔进articles集合，或者选个JSON格式导进去就行了。这是展示咱应用的基本功，页面会变得更好看哟~

步骤五：创建Vue组件

{
  "title": "如何使用Vue和Firebase Cloud Firestore构建智能应用",
  "description": "本文介绍如何使用Vue和Firebase Cloud Firestore构建一个智能时事通讯应用。",
  "category": "技术",
  "timestamp": "2021-09-01 10:00:00"
}

搞定！现在我来教你怎么用Vue组件做文章展示和实时更新，在Articles.vue这例子里都能找到答案。首先得在Vue组件里加个Firestore的实时更新的东西，然后再把文章数据塞进模板里面。这么做的话，当Firestore的文章有变动，网页上的信息马上就能跟着变，让用户随时了解最新的新闻动态！

步骤六：完成路由和视图

想让文章变得更好读吗？只要在router.js文件里加个路由设置，然后在App.vue文件弄个模板就完事儿！这样用户就能一边看文章，一边知道最新的动态了。

import { db } from '../main'

用Vue和FirebaseCloud Firestore搭个饭圈APP超简单！里外搭配，就能充分利用它们的优点，搞定可以实时聊天又能个性推荐的热门应用。这样你们看新闻就更快、更好玩！

export default {
  data() {
    return {
      articles: []
    }
  },
  mounted() {
    // 获取文章数据
    db.collection('articles').orderBy('timestamp', 'desc').onSnapshot(snapshot => {
      this.articles = snapshot.docs.map(doc => ({
        id: doc.id,
        ...doc.data()
      }))
    })
  }
}

看完这篇文章，相信你对时事通讯应用有更深了解！要是用Vue或Firebase遇到问题，直接上官网找答案就行。网站上还有很多实用功能等你来发现！

  
{{ article.title }}
  
{{ article.description }}
  
{{ article.category }}
  
{{ article.timestamp }}