网速好快新闻都快炸锅了，所以我们就打算用Vue啦、Firebase啦还有Cloud Firestore这几个神器来搞个实时更新App。快来看看我们如何大干一场！

介绍两个新玩意儿：Vue和FIRESTORE云存储

你晓得不，Vue这个JavaScript框架牛得很，搞网页游戏杠杠滴！学起来不难，上手就行，特别灵活好用。各种Web应用都可以轻松驾驭！还有谷歌家的Firebase也很火爆，特别是Cloud Firestore，堪称NoSQL数据库的佼佼者，实时响应数据更新，后端数据库选它绝对放心。如果把Vue和Firebase的Cloud Firestore联手使用，你会感受到全新一代的网站体验，前后台数据连接简直就是顺滑无比！

准备工作

想开发新闻通讯APP？快学下Vue和Firebase！看这里：第一步，打开命令行，安装VUE；第二，创建VUE新项目，开始玩转Firebase，创建新项目后别忘了激活Cloud Firestore数据库！然后，在Firebase的Cloud Firestore那跑个测试版，顺便看看数据库地址；接着，把Vue.js加点到项目设置中，再把配置文件里的东西复制到Vue项目的.env.local文件；最后，把Firebase加进Vue项目，就看到主页上的Firebase和Firestore，祝贺你成功！

npm install -g @vue/cli

设置Firebase Cloud Firestore

vue create news-app

首先，我们先上 Firebase 后台弄个新的 Firestore 库，记得打开实验模式。搞定后就尽情享乐！

兄弟，赶紧跟我来找那个叫”General”的东西，然后把设置搬到我们的Vue项目里行了，这样就能连到Firebase云存储那边了！

构建新闻通讯应用

先在你的Vue项目里找到叫’components’的文件夹，然后在里面建个新文件叫’News.vue’，这个就是用来展示每天更新新闻滴。紧接着，要用到计算属性和Firebase这些技术，让最新的新闻跑进来。接下来用v-for指令，把每条新闻都亮相出来。最后回到你的主文件App.vue，插进去News组件，这样就能看到全部新闻了

编译和运行

完工！把特殊端口加进去，新闻页面马上出来。太棒了，用Vue和Firebase云存储搞出的炫酷新闻小程序就这样做好了！

npm install firebase

进一步开发与优化

import firebase from 'firebase/app'
import 'firebase/firestore'
// 初始化FirebaseApp
firebase.initializeApp({
  apiKey: process.env.VUE_APP_FIREBASE_API_KEY,
  authDomain: process.env.VUE_APP_FIREBASE_AUTH_DOMAIN,
  databaseURL: process.env.VUE_APP_FIREBASE_DATABASE_URL,
  projectId: process.env.VUE_APP_FIREBASE_PROJECT_ID,
  storageBucket: process.env.VUE_APP_FIREBASE_STORAGE_BUCKET,
  messagingSenderId: process.env.VUE_APP_FIREBASE_MESSAGING_SENDER_ID,
  appId: process.env.VUE_APP_FIREBASE_APP_ID
})
// 创建Firestore实例
const db = firebase.firestore()
// 导出Firestore实例
export default db

咱们可以加些热门新闻和用户评论，这样用户就更乐意来玩。谁不喜欢新鲜事儿呀？再说，发个短信通知用户也挺好的。多动脑筋想想，咱们就能做出更好玩的网站！

总结与展望

哈喽，给你们讲讲怎么用Vue跟Firebase简单搞定一个动态新闻App！现在科技可真发达，啥都行！以后网页开发应该会更有意思了，好期待~

  

    
最新新闻
    

      

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


import db from '@/main'
export default {
  name: 'News',
  computed: {
    latestNews() {
      return db.collection('news')
        .orderBy('date', 'desc')
        .limit(10)
        .get()
        .then(querySnapshot => {
          const news = []
          querySnapshot.forEach(doc => {
            news.push({
              id: doc.id,
              ...doc.data()
            })
          })
          return news
        })
    }
  }
}


h1 {
  font-size: 24px;
  font-weight: bold;
  margin-bottom: 20px;
}
li {
  margin-bottom: 20px;
}
h2 {
  font-size: 20px;
  font-weight: bold;
  margin-bottom: 10px;
}
p {
  font-size: 16px;
  margin-bottom: 10px;
}

  

    
  


import News from '@/components/News'
export default {
  name: 'App',
  components: {
    News
  }
}