iT邦幫忙

鐵人檔案

2023 iThome 鐵人賽
回列表
SideProject30

從零開始的firebase與Vue框架ーSNS專案 系列

作為一個轉職前端者,Side Project固然是一個必修課題。我決定利用這次鐵人賽的機會,紀錄初次開發專案的過程,與其他工程師合作,共同開發一個類SNS——且同時具有社群功能(類論壇形式)的網站專案——利用Firebase處理後台,並用Vue框架去開發。
除了介紹前兩個開發工具外,也會嘗試寫下開發時運到的問題與解法,讓這次的開發不僅僅專注於成品的完成,還有訓練自己解決問題的能力。
可能文章多有不成熟或誤讀之處,請大家不吝惜於提供指正與意見,先謝謝各位前端前輩們。

鐵人鍊成 | 共 31 篇文章 | 9 人訂閱 訂閱系列文 RSS系列文 團隊好想工作室 v7.0
DAY 11

Day11—Vue(五)創建Vue應用與模板語法(上)

前言 昨天建置好環境後,今天終於能進入如何實際運用Vue這個框架的環節。 創建應用實例 第一步,創建Vue應用: import { createApp } f...

2023-09-26 ‧ 由 ch0902 分享
DAY 12

Day12—Vue(六)模板語法(下):指令

前言 在前一篇文章中,介紹了Vue3的模板語法,讓我們對Vue3的模板有了初步的認識。今天我們要來介紹Vue3中非常重要的一個部分 —— 指令(Directi...

2023-09-27 ‧ 由 ch0902 分享
DAY 13

Day13—Vue(七)響應式基礎:ref和reactive的差別

前言 前一篇文章介紹了模板語法,今天我們將介紹Vue3的響應式基礎。在Vue3中,我們可以通過ref和reactive兩種響應式API創建響應式數據。ref和...

2023-09-28 ‧ 由 ch0902 分享
DAY 14

Day14—Vue(八)v-bind綁定class與style

前言 今天要來講解v-bind的應用,以及它與class和style的綁定: 資料綁定提供了在HTML元素中靈活操作CSS類別列表和內聯樣式的解決方案,這是一...

2023-09-29 ‧ 由 ch0902 分享
DAY 15

Day15—Vue(九)事件處理

前言 今天我們要來介紹如合用v-on這個指令進行監聽事件的處理。在 Vue 中,我們可以通過v-on指令(簡寫為@)來監聽DOM元素的事件,當指定事件被觸發時...

2023-09-30 ‧ 由 ch0902 分享
DAY 16

Day16—Vue(十)生命週期

前言 今天將來初步了解生命週期的部分,並簡單介紹生命週期鉤子的名詞。 簡介 Vue 3 的生命周期是組件從創建到銷毀的整個過程,包含了一系列的生命週期鉤子:在...

2023-10-01 ‧ 由 ch0902 分享
DAY 17

Day17—開發日記(一)實際專案建置與串接Firebase

前言 今天開始的工作日誌會比較流水帳化,變成主要紀錄今天預定的進度與踩到的坑以及解決的問題等。先進行各項工作時的具體操作步驟,省略比較瑣碎或重複性的部分,著重寫...

2023-10-02 ‧ 由 ch0902 分享
DAY 18

Day18—開發日記(二)Tailwind

前言 今天繼續開發,重點著重在:初步探索Tailwind與理解App.vue。 工作重點 Tailwind 之前的專案架構下是使用了boostap切版,這次先諮...

2023-10-03 ‧ 由 ch0902 分享
DAY 19

Day19—開發日記(三)客製化Tailwind

前言 今天是開發的Day3,主要任務仍是切版與熟悉Tailwind。 實現內容 頁面大致完成,置換字型和顏色 已解決問題 如何在Vue中導入Google...

2023-10-04 ‧ 由 ch0902 分享
DAY 20

Day20—開發日記(四)Tailwind自定義斷點、v-model雙向綁定

前言 今天是開發的Day4,重點為RWD版面以及V指令的複習。 實現內容 RWD修正 Tailwind:斷點、自定義變數 v-model指令 已解決問題...

2023-10-05 ‧ 由 ch0902 分享