[nuxt 教學]Firebase Google Login in Vuex前端與Vue[nuxt 教學]Firebase Google Login in Vuex 若開發小型專案,直觀選擇的資料庫一定會有Firebase,Firebase輕便、快速,結合Vuex實作登入系統以及後續資料處理相當流暢,本文針對實作登入系統先做介紹。 step.1 建立Firebase資料庫 先到Firebase官方網站建一個新的專案資料庫,建立完後點選該專案
[Nuxt 教學] vuex設定及nuxtServerInit一次接收多組api前端與Vue作者近期嘗試使用vuex管理專案所需之共用資料,原先只需接收一組api,因需求接收第二組api時卻發現始終只能接收一組api,其實是設定上發生了小錯誤,讓我們來看看有哪些設定要注意吧! step.1 設定vuex 接下來的步驟可配合官方文件一起服用,~~功效會加倍哦~~~ vuex官方文件:點我 此範例在nuxt環境下應建立在根目錄的store裡面
[Nuxt教學] Vue-carousel完成實用的slideshow!前端與Vue使用Nuxt&Vue若想快速建立slideshow,可參考本文介紹的第三方套件vue-carousel,slideshow通常在網頁中都會使用到,為此也能做成Component,如此一來其他專案有符合需求的也可重複使用。
讓Heroku幫你輕鬆建立Nuxt網頁前端與VueNuxt除了可以使用SPA建立靜態頁面,也能使用SSR製作動態網頁 但是在部署上面實在是很麻煩又傷腦筋... 小編這邊推薦一個很好用又免費的Heroku! 他可以透過git把做好的東西自動部署環境,整套幫你做妥妥的省時又省力! 除了建立帳號以外還必須安裝Heroku Cli Heroko Cli的功能是讓我們可以使用heroku的相關指令,方便我們建立、管理
【Nuxt教學】來玩 AOS.js 讓你的網頁變生動吧!前端與VueAOS.js是「Animate On Scroll Library」,是個非常簡單的頁面滾動的動態資料庫。想像那些年為了不要讓頁面看起來太靜態,想在滑動時才讓元件顯示,不再是一件痛苦的事!它也可以很有趣!! 當然另一個較人熟知的方法,之前也分享過【Drupal教學】實作Animate.css + WoWJS 做出高質感網頁設計,有興趣的請自己看看
圖解 Vue 的生命週期前端與Vue用圖去理解 Vue 在不同時期中 el 與 data 的變化。Vue 就像我們有孩童時期、青春期、壯年期跟老年期,各個時期有不同的任務與職責一樣。接下來,我們就一起來認識 Vue 的「 生命週期」。
【Nuxt教學】實作引用 Fontawesome 5 到Nuxt專案前端與Vue圖示給予了使用者相對應的記憶方式,還能將訊息精簡更為網站帶來更多美觀的設計。而Fontawesome 是很常使用到的 icon library,隨時替換適合圖示、顏色以及大小,靈活度會比使用「圖片」來得高出許多。那既然使用了 Nuxt.js 來開發網站,那我們就來看看在 Nuxt 中如何安裝 Fontawesome 5 吧!
Nuxt教學:快速建立Nuxt網站地圖 Sitemap前端與Vue新網站上線後,大家都希望搜尋引擎能夠趕快收錄網站的所有頁面,讓使用者能夠找到網站的資訊內容,期待網站產生應有的效益。與其等搜尋引擎慢慢爬到網站,不如製作網站地圖(Sitemap)提交給搜尋引擎,讓搜尋引擎建立較精確的網站索引,來提高頁面出現的機會。那我們就跟著下面來學習吧~