如何运用Vue和Firebase Cloud Firestore搭建响应式时事通讯运用
序言:
随着互联网的飞速发展，新闻信息的传播速度越来越快。做为当代人，大家总是希望可以第一时间了解到这些时事新闻。因而，在这篇文章中，我将介绍如何运用Vue和Firebase Cloud Firestore构建一个响应式时事通讯运用。什么叫Vue和Firebase Cloud Firestore:
Vue是一套搭建操作界面的渐进性JavaScript架构，它采用了组件化的开发方式，能够帮助我们更轻松地搭建交互式的Web应用软件。Firebase是一个由Google提供的云服务平台，其中的Cloud Firestore是一种灵活的、可扩展的NoSQL数据库，旨在帮助大家搭建应用程序的后面。
准备工作:
在开始前，我们需要先组装Vue和Firebase。可以用下列指令组装VueCLI:1
npminstall-g@vue/cli
随后，我们应该创建一个新的Vue项目:
vuecreatenews-app
下面，我们需要在Firebase控制台中创建一个新的项目，并开启Cloud Firestore数据库。
设定Firebase Cloud Firestore:
在Firebase控制台中，点击“创建新的Firestore数据库”按键，然后点击“逐渐”。在“创建数据库”对话框中，挑选“以测试模式运行”选项，点击“下一步”。
下面，选择一个数据库部位，点击“下一步”。
最终，点击“运行”。
在控制台中，点击“设定”的按钮，并选择“项目设定”。
在“通用”菜单栏中，往下翻转到“您的应用程序”部分，并把“导进以下几点”，挑选Vue.js。
随后，将环境变量内容拷贝到你的Vue项目的.env.local文档中。
组装Firebase:
在Vue项目的根目录下，使用下列指令组装Firebase:1
npminstallfirebase
随后，在src/main.js文档中导进Firebase和Firestore:
importfirebasefromfirebase/app
importfirebase/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案例
constdb=firebase.firestore()
//导出Firestore案例
exportdefaultdb
搭建新闻通讯运用:
最先，我们应该创建一个用以表明新闻的部件News.vue，并在Vue项目的src/components目录下建立。在News.vue中，我们将应用Vue的computed特性来从Firebase中获得实时新闻数据，并用Vue的v-for命令循环渲染每个新闻内容。
最新新闻
{{news.title}}
{{news.content}}
{{news.date}}
importdbfrom@/main
exportdefault{
name:News,
computed:{
latestNews(){
returndb.collection(news)
.orderBy(date,desc)
.limit(10)
.get()
.then(querySnapshot=>{
constnews=[]
querySnapshot.forEach(doc=>{
news.push({
id:doc.id,
...doc.data()
})
})
returnnews
})
}
}
}
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;
}
随后，在Vue项目的根目录下的App.vue文档中应用News部件:
importNewsfrom@/components/News
exportdefault{
name:App,
components:{
News
}
}
编译和运行:
大家只需使用下列指令在当地编译和运行Vue项目:1
npmrunserve
随后，打开网页并浏览http://localhost:8080，你将看到一个表明最新新闻页面。
汇总:
本文介绍了如何运用Vue和Firebase Cloud Firestore构建一个响应式时事通讯运用。进一步开发可以包括加上新闻的作用，及在新闻发布后自动推送通知给用户等。根据学习和掌握这些技术，我们能搭建大量实用且具备响应式的Web运用。以上就是如何运用Vue和Firebase Cloud Firestore搭建响应式时事通讯运用的详细内容，大量请关注其他类似文章！