现在用手机上网的人多，所以时事通这款APP就火起来了！它能帮咱们随时了解新鲜事儿，还能跟好友分享观点。今儿个我就来教教大伙怎么用Vue框架和Firebase的云数据库（Cloud Firestore）快速做出一个完整的时事通应用。学会后，相信你也能轻松掌握这些技巧！

准备工作

想做个新闻推送软件？来，咱们先热身一下。首先确定你电脑里装了Node.js没；接着，用Vue CLI造个新项目；再来，上Firebase官网注册个号再新建个项目；然后在Firebase项目控制台找要用到的那堆配置文件；最后，在Vue项目的根目录下，用命令行工具把Firebase和相关的Vue插件给装上。搞定这几步，就可以开始动手！

创建Firebase服务

搞定Firebase，时事通讯app基础就完成了！先在Vue项目中建个firebase.js文件，将Firebase设置好。然后，在Firebase控制台上搞个news的Cloud Firestore集合放消息用。当然，你也可以按照喜好改改集合的字段，比如标题啊、内容啊、发布时间之类的，让它更符合你的APP需求。

npm install firebase vuefire

实现时事通讯应用

想要做个时事通讯应用？别急，先搞起来！首先，你得懂点儿Vue，看下我们的项目里面有没有News.vue文件，这就是显示新闻列表的那个。接下来，加个表单组件，让每个人都能发布新闻！这样一来，大家就可以看到别人的动态，还能分享自己喜欢的东西

import firebase from 'firebase/app'
import 'firebase/firestore'
 
const firebaseConfig = {
  // Your Firebase config here
};
 
firebase.initializeApp(firebaseConfig);
 
export const db = firebase.firestore();

运行应用

搞定这些步骤之后，就在Vue项目里面敲命令试试看启动你的应用吧～这样就能顺利地进入并拿到链接了，接下来就直接在浏览器中浏览你的应用！这样做的话，你也可以轻轻松松创建一个实时聊天功能的Web应用哟~

数据交互与展示

使用上Firebase和Cloud Firestore，别担心没人找你聊天。只需轻轻点两下设置连接，然后用Vue一拖就行，聊天记录妥妥地同步显示和更新。便捷快速又同步，就是这么省心！

  

    
时事通讯
    

      

        
{{ news.title }}
        
{{ news.content }}
        {{ news.date }}
      
    
  

 

import { db } from '@/firebase'
 
export default {
  data() {
    return {
      newsList: [],
    };
  },
  mounted() {
    db.collection('news').orderBy('date', 'desc').onSnapshot((snapshot) => {
      this.newsList = snapshot.docs.map((doc) => ({
        id: doc.id,
        ...doc.data(),
      }));
    });
  },
};

扩展功能与优化

除了搞定最基础的功能，我们也可以让这通讯软件变得好玩点。比如，评论和点赞这些互动方式能拉近你我距离哦；推送通知就像提醒铃声，不让你错过任何大事；再加上个性定制界面，你爱咋弄就咋弄！当然，别忘了优化程序速度，这样用起来才舒心！

  

    
我的时事通讯应用
    
      标题：
      
 
      内容：
      
 
      发布
    
 
    
  

 

import News from './News.vue';
import { db } from '@/firebase'
 
export default {
  components: { News },
  data() {
    return {
      title: '',
      content: '',
    };
  },
  methods: {
    addNews() {
      db.collection('news').add({
        title: this.title,
        content: this.content,
        date: new Date().toISOString(),
      })
      .then(() => {
        this.title = '';
        this.content = '';
      })
      .catch((error) => {
        console.error('Error adding news: ', error);
      });
    },
  },
};

学习与分享

看完这篇文章，你就能学会用Vue和Firebase搭建新闻聊天软件！我们还帮你详细了解 Vue 与 Firebase 的各式超强功能，让你也能变成大神级人物。别忘了告诉你的朋友们，我们一起加油，打造更好的 Web 应用，给移动互联网添砖加瓦！

npm run serve