Vue 和 Firebase快速搭建无服务端微博类应用

一直在寻找无后端的解决方案，今天终于找到了。下面我带领大家快速的部署一下。

参考资源

原文地址： https://www.smashingmagazine.com/2018/04/vuejs-firebase-firestore/

简介

参考资源的文章已经介绍的非常详细了，但是文章有好几处没有说清楚。本文将更详细的步骤补充到这里

项目截图

源码下载

https://github.com/wangdazhi/amazeballs

项目步骤

1. 安装vue

npm install -g vue-cli
vue init webpack-simple amazeballs

在国内建议用cnpm

2. 配置firebase

第一步登录firebase并创建项目

Jietu20190319-163054@2x.jpg

第二步获取配置信息
类似下面的

var config = {
    apiKey: "AIzaSyCsXiKteCMbIhsDpGK277SR8A8P3HOjC8U",
    authDomain: "amazealls-24823.firebaseapp.com",
    databaseURL: "https://amazealls-24823.firebaseio.com",
    projectId: "amazealls-24823",
    storageBucket: "amazealls-24823.appspot.com",
    messagingSenderId: "187582214062"
};

第三步开启cloud firebase

Jietu20190319-163333@2x.jpg

3. 修改src/store.js文件

将上面的获取的config信息填入到store.js 中

4. 采用firebase的身份认证

firebase提供了非常强大的用户认证体系。例如我们可以使用google账号登录。在Authentication界面打开google选项即可，大家还可以自己事实邮箱和电话认证。

Jietu20190319-164650@2x.jpg

5. 安装firebase-tools

npm install -g firebase-tools
firebase login
firebase init firestore

6. 添加服务器逻辑

firebase init functions

7. 部署发布

firebase init hosting

配置过程中请参考下面进行选择

What do you want to use as your public directory? dist
? Configure as a single-page app (rewrite all urls to /index.html)? Yes
? File dist/index.html already exists. Overwrite? Yes

最后运行下面命令

npm run build && mkdir dist/dist && mv dist/*.* dist/dist/ && cp index.html dist/ && firebase deploy

最终效果

发布消息