Vue轻松打造时事通讯APP，Node.js+Vue CLI一键搞定

现今手机牛逼成啥样了，啥都依赖它。教你如何用Vue弄出时事通讯软件，像有只眼睛，能看到最新动态哦～还可以分享下实战中的小心得呢～

一、前期准备

在搞定新闻通讯APP之前，记得要先下载Node.js和Vue CLI！这两个小工具就是建好Vue项目的基础，帮你省心不少！如果还没有安装的话，直接去官网搜一搜，跟着流程走就可以。

二、创建项目

vue create news-app

想快点儿弄个Vue项目？在命令行敲几下就成了！开始的时候，选择默认设置，系统会自动帮你搞定那些初始化文件。然后等项目建成了，就可以开开心心地开始编程啦～

三、集成Firebase

你知道吗？火狐狸其实就是谷歌家的移动端神器，什么功能都有！首先得上官网搭个项目，然后一定要拿到配置代码。接下来，就把火狐狸相关的东西加到我们的Vue项目里，别忘了在src目录下创建个firebase.js文件来设置一下~

npm install firebase

搞定之后，随便举个例子，想要用数据的Vue组件里就把firebase.js扔进去，接着再用firebase.firestore()弄出来一个数据库实例就搞定！这样你就可以随意地往这个云端火狐（Cloud Firestore）里面塞东西咯~

// firebase.js
import firebase from 'firebase/app';
import 'firebase/firestore';
const firebaseConfig = {
  // your firebase config
};
firebase.initializeApp(firebaseConfig);
export default firebase;

四、构建时事通讯应用

比如，咱们现在要做一个简单的新闻列表APP，要用到Firebase和云存储平台Cloud Firestore，这样才能实现新闻在线增加和浏览~首先，我们得在Firestore的数据库里创建一个叫”news”的文件夹，然后把一些初始新闻内容放进去。

简单说，只要你用getNewsData这个方法就行了。在mounted这个钩子函数那儿，把新闻数据从Firestore拿过来放到部件的newsList属性那里。然后，用Firestore的onSnapshot方法，在startNewsUpdate方法里守着新闻集合，这样新闻列表就能实时更新。

import firebase from '@/firebase.js';
export default {
  data() {
    return {
      newsList: []
    };
  },
  mounted() {
    const db = firebase.firestore();
    // 在这里可以执行数据库操作
  }
}

想让用户输入的新闻直接存到库又能更新新闻列表？那就在Vue模板加个表单并连上addNews函数与表单的提交按扭呗~addNews这招儿可是能实时把新闻添加到Firestore数据库里面嘞！

五、总结与注意事项

看完这个教程，咱就可以开始动手用Vue、Firebase和Cloud Firestore来做一款聊天工具，甚至还能实时看新闻！但是在实际操作过程中，要记住下面这些小窍门哈：

export default {
  data() {
    return {
      newsList: []
    };
  },
  mounted() {
    this.getNewsData();
  },
  methods: {
    async getNewsData() {
      const db = firebase.firestore();
      const snapshot = await db.collection('news').get();
      snapshot.forEach(doc => {
        this.newsList.push(doc.data());
      });
    }
  }
};

记得把Firebase的设置保密，别让人偷了你们的重要东西

Firestore数据太多了，用limit和where弄快点就能查到了！

别整个儿文档瞎删，得用Firestore的update去更新集合里面的东西~

export default {
  data() {
    return {
      newsList: []
    };
  },
  mounted() {
    this.getNewsData();
    this.startNewsUpdate();
  },
  methods: {
    async getNewsData() {
      // ...
    },
    async startNewsUpdate() {
      const db = firebase.firestore();
      const collectionRef = db.collection('news');
      collectionRef.onSnapshot(snapshot => {
        snapshot.docChanges().forEach(change => {
          if (change.type === 'added') {
            this.newsList.push(change.doc.data());
          }
        });
      });
    }
  }
};

看了这篇文章，你应该就能搞明白怎么用Vue、Firebase还有Cloud Firestore搭建新闻类的应用啦～加油

  
    
    
    添加新闻