一直在寻找无后端的解决方案，今天终于找到了。下面我带领大家快速的部署一下。
参考资源
原文地址： 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
最终效果
登录
发布消息
