我是圖片:https://drive.google.com/file/d/1j8EyVDr5OfNZdq4niRz_nZQnTJzMITQB/view?usp=...
github pages：https://rochelwang1205.github.io/sweetie/ github repo：https://githu...
終於撐到連續發文的第30天，分享個賽中小故事。 (1)主題名稱由來其實起初參加第 15 屆鐵人賽的主題不是「試試用Vue建立網站吧」，而是「跟著雲端前輩用Vue...
資料來源是先前建立的餐廳 API（採用 json-server 方式建立），管理者具有新增餐廳的權限。本系列旨在練習開發前端畫面，因為現有前端技術僅支持簡單的...
github pages：https://rochelwang1205.github.io/sweetie/ github repo：https://githu...
後台管理者頁面設計概念同本專案的前端頁面。管理者於指定的頁面登入後，主頁功能除首頁、登出外提供「管理餐廳列表」一項功能。因後台模板與前端相似，開發過程會簡單說明...
github pages：https://rochelwang1205.github.io/sweetie/ github repo：https://githu...
程式碼盡量只寫要說明的地方，無關的就不贅述。 (3-4)頁面表單提交的規範 點選任一張卡片時，表單中「餐廳評論」欄位才可進行編輯。否則唯讀狀態。 原本已有評...
github pages：https://rochelwang1205.github.io/sweetie/ github repo：https://githu...
因開發過程細節較多會分成兩篇來說明。 (1)新增餐廳實評頁面檔案路徑 src / views / front 底下新增 CommentView.vue 檔案。...
github pages：https://rochelwang1205.github.io/sweetie/ github repo：https://githu...
「Day14-試試Vue3-規劃口袋餐廳的頁面」提到建立新頁面之前，建議專注於設計所需的 html 結構。這樣可以更好地思考如何渲染資料以及應該使用哪些 Jav...
github pages：https://rochelwang1205.github.io/sweetie/ github repo：https://githu...
撰寫手機樣式(@media可以參考#從零開始1️⃣6️⃣：RWD!!@media(max-width)和@media(min-width)這篇) 我設定了幾個斷...
接續處理口袋餐廳清單右側的「移除」鈕功能。 (2)口袋餐廳清單-移除鈕分為資料渲染與觸發方法兩部分說明。 1.「移除」鈕的限制只能移除口袋餐廳清單（以下簡稱口袋...
匯總前二十幾篇學習到的，接下來會以甜點店商設計稿(可商用)的產品頁(product)實際操作練習。 觀察設計稿有沒有通用、重複的部分 設計稿導覽列和頁尾部分似乎...
口袋餐廳頁面下方區塊是篩選後的清單，以表單形式顯示所選的口袋餐廳。畫面示意圖請參考「Day14-試試Vue3-規劃口袋餐廳的頁面」篇。 (1)口袋餐廳清單-主表...
前置作業1：調用 Pinia store 資料<script></script> 將 LoginStore.js 檔裡的 useLogi...
擴展/繼承(Extend/Inheritance) 我們可以定義一組樣式，然後將這些樣式應用於不同的元素，同時保持代碼的整潔和可維護性。 使用@extend...
說明口袋餐廳的表單提交前，先調整登入會員的 Pinia store 與會員登入頁面。將會員登入時的電子郵件與 id 也儲存於登入會員的 Pinia store...
根據官方文件說明，Sass有兩種語法，最常用的是SCSS語法（.scss），而另一種的縮排語法（.sass）則比較不常見。縮排語法使用縮排而不是中括號來嵌套程式...
當一個專案變得越來越大，CSS的複雜性也隨之增加，要管理龐雜的程式碼變得很麻煩。這篇開始要介紹的Sass，可以幫助我們解決這些問題，並將CSS代碼組織得更加結構...
同「Day5-試試Vue3-建立會員API」與「Day13-試試Vue3-建立餐廳API」篇採用 json-server 方式建立 API。 (1)新增 use...
(3-2)動作拆解-品牌名稱與地址分為資料渲染與觸發方法兩部分說明。 1.下拉選項內容使用 v-for="item in filterRes.filt...
OOCSS（Object-Oriented CSS） OOCSS（Object-Oriented CSS）強調了分離結構和外觀的概念。以下是 OOCSS...
真是不敢相信已經來到第30天了 還真想不到去年此時還在查著鐵人賽文章的我，此刻已經在上班了，還挑戰了鐵人賽30天！！！ 真的很感謝鐵人賽這樣的制度以及眾多前輩無...
(3-1)動作拆解-品牌受眾分為資料渲染與觸發方法兩部分說明。 1.下拉選項內容使用 v-for="item in restaurants"...
在前端開發中，CSS 的組織和管理變得至關重要，特別是當項目變得越來越龐大時。為了使 CSS 更易於維護、擴展和協作，有三種常見的設計模式被廣泛使用：SCSS、...
在學習的過程以及查找學習資源的過程，有很多覺得很重要，但優先順序排在比較後面的，或是因為要做某些功能而查到的額外知識，也有想了解但還沒花時間了解的知識，底下就記...
接續上一篇#從零開始15：怎麼設定照片大小，這篇要討論@media(max-width)和@media(min-width)。 在網頁設計中，響應式網頁設計（R...
RochelWang
jennydisc
vincentxu
iThome鐵人賽
看影片追技術