昨天上班時剛好抽空測了個東西,沒想到居然有 bug 產生。
我們 main.js 裡面做全域混入 firebase 的部分,目前發現不可這麼做,必須通通改為局部混入。
也就是說我們混入的地方要把它取消
import Vue from 'vue'
import App from './App.vue'
import { router } from './router'
import store from './store'
import { BootstrapVue, IconsPlugin } from 'bootstrap-vue'
import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'
這部分不能要了
// import firebase from './Model/FirebaseModel.vue'
// Vue.mixin(firebase)
Vue.use(BootstrapVue)
Vue.use(IconsPlugin)
Vue.config.productionTip = false
new Vue({
router,
store,
render: h => h(App)
}).$mount('#app')
把其他有用到 Firebase 模組的地方通通改成局部混入,以 App.vue 來說就是像這樣:
<script>
import firebase from './Model/FirebaseModel.vue'
export default {
name: 'App',
mixins: [firebase],
data () {
return {
loginShow: false,
loginClick: 0
}
},
created () {
this.F_stateWatcher()
},
methods: {
showLoginClick () {
this.loginClick++
if (this.loginClick > 2) {
this.loginShow = true
setTimeout(() => {
this.loginClick = 0
this.loginShow = false
}, 3000)
}
this.$nextTick()
}
}
}
變得比較麻煩,但是沒辦法,目前發現的問題是如果全域混入了,使用 BootstrapVue 的 b-card 組件時,他提供的title
、 sub-title
property 竟然會失效,不過後來發現可以使用 <b-card-title>
來做為替代品,他和 title property 會渲染一樣的結果,目前不知道是否全域混入會對 b-card 產生 bug,就算我混入的組件是完全沒有內容的也是一樣的狀況,所以應該和組件內容無關,而是混入這個動作會對他產生問題,所以這邊我是傾向個別 mixin,連 <b-card-title>
替代品都不要使用,畢竟還不知道是否有其他的連帶影響 ...。
算是實作過程中遇到到的坑吧 ! 如果有人知道怎麼回事還希望可以來幫幫解惑一下哈哈,或許晚點我會找個地方發文問問...。
感什麼言,很多東西都準備的很差啊哈哈。這個月來真的非常累,老實說前面有事先準備大概 5 ~ 6 篇文章,結果根本就不夠用阿,感覺準備的方向錯誤,最前面應該把組件的教學部分拆掉,直接早點開始做專案才對,不然後面也不會搞成下班後要趕快做專案,做完再寫文章,還因為 debug + 趕進度的關係,程式碼可以說是興頭一起直接下去了,完全沒有事先做好架構的規劃,幾乎都是邊做邊調,搞的亂七八糟,連 bootstrap 的 RWD Layout 都沒有花時間去給他做個基本處理,現在網站給他縮小只有一個慘字可以形容阿哈哈。
我記得當初給他訂下的功能是這些 ( 結果訂下的功能完全沒把 Recently.vue 放在眼裡哈哈 ),並且有完成的給他打個勾:
使用者:
瀏覽文章 v
在文章底下留言 v
關鍵字搜尋文章
管理者:
訪客一樣的功能
文章的新增編輯刪除 ( 算完成一半沒做到刪除 )
個人資料的編輯 v
屏蔽訪客的留言
個人覺得算是還過得去啦,雖然沒全部完成,但是因為沒考慮到的東西太多,比如說要做個人資料的編輯,其中有大頭貼的部分後來才想到必須配合 storage 功能,網站上線要用 hosting 功能,其實這個以前我都沒碰過,Firebase 我是在大學時有碰過 Auth 和 Firestore 而已,現在都畢業兩年了,是剛好藉著這次機會乾脆把他一口氣搞起來,順便完善學習一下以前沒有學完的 Firebase 其他模塊阿ㄏㄏ...,最後勉勉強強算是讓這個專案有了基本的骨幹在啦哈哈。
真的亂七八糟,但也因為這次比賽,讓我看見自己在某些極限狀態下竟然還能夠鼓起力氣來準備比賽,覺得自以完完全全符合自己在第一篇所述說的四種人中,第二種人的特質啊 ( 就算不知道做什麼還是一直做,無腦衝的人啦 )! 真為自己感到開心阿其實,最後呢,這隻專案我打算把他搞好,未來的時間會持續給他更新,網址就丟在這裡了,基本上就是爛泥一攤的狀態阿哈哈,沒事別點進去亂看 XD,登入的方法我會把它改掉所以各位別亂試啊哈。
https://sianzaren-fa8bb.web.app/
之後要更新什麼呢 ? 恩基本上會先從網站外觀重新把它搞起來,再來重新做好後台的東西,我一定要讓他感覺有被好好對待的樣子啦哈哈,其實基本缺乏的東西真的很多啊,比如說 Router 就可以吐槽很多,其實現在給網址後面接個 /login 還是可以進到登入頁阿、也沒有給個重新導向 404 頁面阿啥的,哎呀呀真的是好麻煩阿,更新文章應該會放到那個目前很還是很爛的專案裡面啦哈哈,因為這次開這個 Firestore 本來就是有打算要來經營個部落格放資料,想說自己搞一個哈哈,會把它當作鐵人賽的延續,一邊紀錄前進一邊精進,謝謝收看到如今的你,希望我們共同成長回饋社會,做個勇往直前的人,甘溫甘溫一起努力 ~~
最後感謝我的隊友們:Polly、阿電、喬依司、Eien,哈哈。
沒事也可以逛逛我們其他團隊成員的文章啦 ~~
eien_zheng: 前端小嘍嘍的Golang學習旅程_The journey of learning Golang 系列
PollyPO技術: 前端設計轉前端工程師-JS踩坑雜記 30 天 系列
阿電: 忍住不打牌位,只要30天VueJS帶你上A牌 系列
喬依司: 實作經典 JavaScript 30 系列