手机网速越来越快了，大家都在找好玩的事情看，于是各种新闻类APP都出来了。可是它们总感觉不对劲儿。那该怎么办？别急，今天我就教你如何用Vue框架和Firebase云存储搭建一个个性化的新闻聊天APP。这样，你就可以更轻松地利用新技术来满足大家对个性化新闻的需求！

一、准备工作

想不想试试用Node.js来搞定一个新闻提醒小应用？首先，你得熟悉下Node.js，这是搭建Vue项目的必备技能。接着，用常用的命令行工具创建一个Vue项目，就跟玩游戏建角色差不多容易。别忘了安装Firebase这个神奇的工具，还得注册个账号。然后，在Firebase控制台里创建一个新的项目，记住所有的设置信息，以后要用到。最后，回到Vue项目的主文件夹，启动Firebase项目，记得勾选Firestore和Hosting两项。

vue create newsletter-app

二、构建时事通讯应用

npm install -g firebase-tools

首先嘞，News.vue里要展示新闻列表。然后，在src中加个firebase.js文件，跟Firebase连接上，这样就能跟Cloud Firestore聊天。接着，在News.vue那儿点几下鼠标，mounted生命周期会调用Cloud Firestore API取消息哒。最后，用v-for指令把新闻都展示出来就行了，搞定！

firebase login

三、部署应用

firebase init

开发完APP后别忘让朋友们都试试看，毕竟要上传给他们。首先，在Vue项目主文件夹内操作下，把程序弄出来，加上静态文件。接着，扔到Firebase Hosting去，搞定！Firebase会给你生成一个网址，大家就能用这个链接玩你的应用。

咱们的新闻 app搞定！还是云端版的！用上 Vue框架和 Firebase Cloud Firestore技术，可以随时调用数据，还能自己动手设计界面哪！

  

    
时事通讯
    

      
{{ news.title }}
    
  


export default {
  data() {
    return {
      newsList: []
    }
  },
  mounted() {
    // 获取新闻列表
    // 在这里使用Firebase Cloud Firestore的API获取数据
  }
}

想学做聊天软件？别怕！跟着这步走，开发火爆产品也没那么难哟~

import firebase from "firebase";
const firebaseConfig = {
  // 粘贴Firebase项目的配置信息
};
firebase.initializeApp(firebaseConfig);
export default firebase;