互联网发展这么快，热点新闻谁不关心？现在信息爆炸,谁不想第一时间知道点啥？别急，咱用Vue和火爆的Firebase云端数据库，做个时事通讯应用呗！这样大家随时随地都能了解最新的动态。
一、准备工作
别忘了装上Node.js和Vue CLI，它们可是项目的好帮手。那我们就来创建一个新项目，嗯…“news-app”怎么样？开始动手干起来！
二、创建Firebase项目
要搞咱这个即时通讯app嘞，得使大热门Firebase云库（Cloud Firestore）来存储同步数据哟。抓紧上网注册Firebase账号，然后在后台创建新项目就行。照着提示搞定Web应用设定没问题。别忘喽，记得抄下firebaseConfig这东西，以后可能还要用到！
三、安装Firebase依赖
首先，你得找到“news-app”这个地方，就能开始安装Firebase！只要在电脑上用终端输入几串指令就搞定。接着，在我们的源代码（src）里面安家落户，弄个“firebase”的地方，然后建个“config.js”添进去。别忘了放上初始化的firebaseConfig对象，记得保存和导出来，这样大家都能用！
npm install firebase
四、初始化Firebase
哈喽亲们！快点找到那个main.js文件，别忘了引入FireBase和config.js。现在我们就可以利用这些小工具来解决一些网站设置问题，比如说为你的新手机选个炫酷的手机壳啥的。搞定这步之后，我们就可以愉快地创建一个Firebase Firestore实例并加入到Vue原型里面。最后，你就可以随心所欲地使用Firestore数据库咯~
export default {
// 粘贴firebaseConfig对象
}
五、创建新闻列表页面
马上干起来！现在赶紧在views文件夹里创建一个NewsList.vue文件，把新闻页面要用到的模板和脚本代码全都塞进去。完全搞定后，你就可以随时随地瞅见热门新闻了！甚至新闻有所更新的话，它也能立即自动显示出来！
import firebase from 'firebase/app' import 'firebase/firestore' import firebaseConfig from './firebase/config'
六、创建新闻添加页面
firebase.initializeApp(firebaseConfig)
看完新闻就动手，导航到views这个文件夹，新建个叫AddNews的.vue文件，把加新闻要用的模板和代码搞定就行~
七、配置路由
const db = firebase.firestore()
你看这个，我们需要把NewsList.vue跟AddNews.vue这俩货儿导入到路由器文件夹下面的 index.js，顺便把路径改好点儿，这样用起来才顺手不是？
Vue.prototype.$db = db
八、创建主页组件
首先，我们要在Views文件夹里建个叫Home.vue的文件，再把主页要用的模板码打进去。主页，主要是给我们指路的，像咱们家里的大门一样
时事新闻
- {{ news.title }}
九、更新App组件
app.vue是我们Vue应用的主心骨，咱们换个好看点的模板，加载速度就快！
export default {
data() {
return {
newsList: []
}
},
mounted() {
this.getNewsList()
},
methods: {
getNewsList() {
this.$db.collection('news')
.orderBy('timestamp', 'desc')
.onSnapshot(snapshot => {
this.newsList = snapshot.docs.map(doc => {
const data = doc.data()
return {
id: doc.id,
title: data.title
}
})
})
}
}
}
十、运行应用
搞定了？好嘞，现在去电脑那儿，输入刚才那个指令启动下这个程序！让它跑一遍，看看顺不顺畅，手头上有什么需要调整的地方也别忘了，改良下使用感。
亲们，我试着用Vue和Firestore搞了个即时聊天，大家都觉得挺好，这样子既能提高咱们的技术又能尽快掌握各种信息。
添加新闻
export default {
data() {
return {
title: ''
}
},
methods: {
addNews() {
this.$db.collection('news').add({
title: this.title,
timestamp: new Date()
})
this.title = ''
}
}
}
。
评论0