新手也能玩转！用Vue和Firebase打造你的潮流新闻应用

现在网速和闪电一样快，手机跟钱包一样出门必备。我们都喜欢快速度过信息，跟朋友们分享。很流行在新闻应用上看新闻，因为可以了解最新的动态，让生活变得更有意思。所以，想要设计一款让大家觉得好用又不费劲的新闻应用，那就得用现代技术。下面，我就教你如何用Vue框架和Firebase Cloud Firestore做出一个既实用又美观的新闻应用，还会有详细的代码示例！

安装Vue CLI和Firebase SDK

想搞个炫酷的聊天软件？那就试试Vue CLI，它能让你方便地搭建起Vue项目，连开发环境都能搞定！别忘喽，还要安装 Firebase SDK哟。按照提示设置好参数就行了。Firebase有很多好用的功能喔，比如说Cloud Firestore这个数据库方案，对需要实时更新的应用来说简直无敌了。

搞定了Vue CLI，以后想建新项目就在命令行里随便输入点啥，立马就搞定！

vue create my-news-app
我们就在Firebase管理面板上新建个项目，记得把相关配置数据也带过来！接着把Firebase SDK安装到Vue工程里头，最后在main.js主文件导入并且设置好相应参数就搞定！

javascript

只需要加点儿’firebase/app’就能搞定！

import ‘firebase/firestore’;

npm install -g @vue/cli
vue create news-app

const firebaseConfig ={

apiKey:”YOUR_API_KEY”,

“登录域”:”你的登录域名”,

projectId:”YOUR_PROJECT_ID”,

存储桶：用”你的存储桶”代替，

消息发送者 ID 就填”你的消息发送者 ID”，

npm install firebase

appId:”YOUR_APP_ID”

};

//初始化 Firebase

import firebase from 'firebase/app'
import 'firebase/firestore'
const firebaseConfig = {
  apiKey: 'YOUR_API_KEY',
  authDomain: 'YOUR_AUTH_DOMAIN',
  projectId: 'YOUR_PROJECT_ID',
  storageBucket: 'YOUR_STORAGE_BUCKET',
  messagingSenderId: 'YOUR_MESSAGING_SENDER_ID',
  appId: 'YOUR_APP_ID',
}
firebase.initializeApp(firebaseConfig)
export const db = firebase.firestore()

来，用火绒的firebaseConfig搞定它！

db就是我们用来操作Firestore的工具。

创建新闻列表组件

快，赶紧去新建个名叫NewsList.vue的文件呗！就在你那个Vue项目的组件页面里。然后直接复制粘帖下边这一段进去就完事了哈~

“`html

<h2>最新新闻</h2>

export default {

  

    
News List
    

      

        {{ news.title }}
      
    
  


import { db } from '../main'
export default {
  data() {
    return {
      newsList: [],
    }
  },
  mounted() {
    db.collection('news').onSnapshot(querySnapshot => {
      this.newsList = []
      querySnapshot.forEach(doc => {
        this.newsList.push({ id: doc.id, ...doc.data() })
      })
    })
  },
}


h2 {
  color: #333;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  margin-bottom: 10px;
}

data(){

return {

newsList:[]

};

},

mounted(){

快点来瞧瞧新闻中心的新鲜事儿~记得时常刷一下~只要有点儿动静，我立马告诉你哈。

咱们把每篇文章都当成一个简简单单的小包裹，里面装着它的身份证号码以及其他内容。就像是在地图上做标记一样方便滴。所以，这种做法就是把所有文章都变成一小袋一小袋的，然后把这些小袋子堆在一起，你看，咱们有了一个全新的东西！我们就叫它“新闻列表”怎么样？

});

  

    
  


import NewsList from './components/NewsList.vue'
export default {
  components: {
    NewsList,
  },
}


#app {
  font-family: Arial, sans-serif;
}

}

}

首先，咱们得搞个FiraseDB的实例。然后就在Data方法里面，整出个叫NewsList的数组来，这就是给新消息安个窝。接下来，利用Mounted这个钩子，时刻关注着Firestore里的news集合，看看有啥新鲜事儿没。要是有，那就赶紧让NewsList数组更新起来！

添加新闻输入表单

别老光看新闻，咱们也来学点别的，比如说自己动手写写东西发到网站上来。首先，创建一个新的文件夹叫Components，再新建一个名叫AddNews.vue的文件。然后把下面这些代码复制进去搞定！

npm run serve

<h2>添加新闻</h2>

提交</button>

title:”

methods:{

addNews(){

直接把这玩意儿丢进新闻那栏，顺便把标个你名就行。

  

    
Add News
    
      
      

Add

  

    
    
  


import NewsList from './components/NewsList.vue'
import AddNews from './components/AddNews.vue'
export default {
  components: {
    NewsList,
    AddNews,
  },
}


#app {
  font-family: Arial, sans-serif;
}