一直在尋找無后端的解決方案，今天終于找到了郊闯。下面我?guī)ьI(lǐng)大家快速的部署一下。
參考資源
原文地址： https://www.smashingmagazine.com/2018/04/vuejs-firebase-firestore/
簡介
參考資源的文章已經(jīng)介紹的非常詳細(xì)了蛛株，但是文章有好幾處沒有說清楚团赁。本文將更詳細(xì)的步驟補(bǔ)充到這里
項(xiàng)目截圖
項(xiàng)目截圖
源碼下載
https://github.com/wangdazhi/amazeballs
項(xiàng)目步驟
1. 安裝vue
npm install -g vue-cli
vue init webpack-simple amazeballs
在國內(nèi)建議用cnpm
2. 配置firebase
第一步 登錄firebase并創(chuàng)建項(xiàng)目
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的身份認(rèn)證
firebase提供了非常強(qiáng)大的用戶認(rèn)證體系。例如我們可以使用google賬號(hào)登錄谨履。在Authentication界面打開google選項(xiàng)即可欢摄，大家還可以自己事實(shí)郵箱和電話認(rèn)證。
Jietu20190319-164650@2x.jpg
5. 安裝firebase-tools
npm install -g firebase-tools
firebase login
firebase init firestore
6. 添加服務(wù)器邏輯
firebase init functions
7. 部署發(fā)布
firebase init hosting
配置過程中請(qǐng)參考下面進(jìn)行選擇
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
最后運(yùn)行下面命令
npm run build && mkdir dist/dist && mv dist/*.* dist/dist/ && cp index.html dist/ && firebase deploy
最終效果
登錄
發(fā)布消息
