本篇開始會對「Day15-試試Vue3-口袋餐廳的html架構」的內容進行調整，試將資料內容改用 JavaScript 來動態渲染畫面。因開發過程細節較多會分幾...
在前端網站效能優化中，圖片處理是一個重要的部分，因為圖片通常是網頁中佔用大量頻寬和資源的元素之一。而關於圖片處理的實踐方法有多種，其中一種是將圖片壓縮，這在本系...
Vue 3 Toastify是一個給Vue.js應用程式提供訊息通知功能的函式庫。它可以幫助您建立和顯示輕量級的訊息提示。 介紹 官網https://vue...
要使用圖片壓縮工具來處理網頁時，一種是打包後處理圖片，像是Webpack 插件image-webpack-loader ，另一種則是幫助您在瀏覽器中進行圖片壓縮...
本篇開箱Tesseract.js是能圖像中取得文字的工具 介紹 Tesseract.js 是一個 JavaScript 函式庫，它是基於 Google 的...
此篇接續介紹口袋餐廳頁面的靜態 html 架構。 (1) html 程式碼畫面示意圖請參考前一篇。介面開發的技巧如下： 導覽（nav）架構請參考「Day8-試...
對於前端新手來說，編寫 JavaScript 可能較具挑戰性。譬如如何使用 v-for 進行資料渲染等 JavaScript 方法，建議先專注於建立想要的 ht...
Web Speech API 可讓您將語音資料合併到 Web 應用程式中。分兩個功能：(Speech Synthesis)語音合成（文字轉語音）和(Speech...
同「Day5-試試Vue3-建立會員API」篇採用 json-server 方式建立 API。 (1)新增 restaurant.json 檔案建立資料專案根目...
這篇簡單說明使用者故事（以會員角度）。 假定華特義式餐廳為一餐飲集團，旗下有多個義式料理相關的餐飲品牌。為提供集團會員更多便利和互動性，會員主頁除首頁、登出外提...
本篇開箱Web Speech API提供了瀏覽器內建的文字轉語音功能。 大家應該用過Google的語音功能吧？其實我們可以透過Web Speech API就...
本篇介紹根據內容自動更新文字區域的高度的工具resize-textarea-vue3 <input>只能輸入單行，而<textarea&g...
分享寫「Day9-試試Vue3-主頁歡迎訊息顯示會員名(Pinia)」時整理幾種其他歡迎訊息顯示會員名的寫法，及從中學到的新知識點。會分兩篇介紹。 (1)登入會...
這邊分享歡迎訊息顯示會員名用儲存在瀏覽器的 localStorage 方法。 (1)介紹 localStorageHTML 5 出現後瀏覽器暫存有了 Local...
本篇開箱的是vue-ellipsis-3，是一款簡單上手就能實現的文字縮略元件。 相信大家在網頁功能上一定會碰到這個需求，超過某個寬度時要出現...省略號（...
這裡要將會員登入頁面（LoginView.vue 檔）中 axios.get() 取得的會員 name 儲存到 Pinia 裡的 store 。再透過該 sto...
(1)新增會員主頁檔案會員頁面登入後的畫面稱為會員主頁（以下簡稱主頁）。路徑 src / views / front 底下新增 MainView.vue 檔案。...
本篇開箱是VueUse中的useResizeObserver方法，簡單就能取元素的寬高 昨篇介紹的是針對整個螢幕的寬高去做偵測，但是如果今天的需求是當某一個...
(1)新增會員頁面檔案路徑 src / views 底下新增 front 資料夾，並於此增加 LoginView.vue 檔案。html 架構同註冊頁面（表單驗...
本篇開箱的是VueUse中的useWindowSize方法，簡單就能取得目前螢幕的寬高 介紹 VueUse 是一個基於Vue.js 的開源函式庫，主要是以...
基本上表單驗證前後端都需要做，前端可做簡單的基礎驗證（如 mail 須為正確格式、必填欄位等），後端則負責較嚴謹的驗證。此篇針對註冊頁面的表單增加 Vee Va...
來嘗試在 NX 中建立 Vue 元件庫 lib。 跟 Nuxt 一樣，目前官方沒有支援 Vue 的擴充，所以要手動設定。 首先建立一個基於 Vite 的 js...
本篇開箱的是Vue Final Modal 4，簡單應用就能有modal視窗 ▲ 示意圖 介紹 Vue Final Modal 是一個輕量、無渲染、對行動裝...
此篇 API 部分主要紀錄如何建立簡易的 API 供專案發送網路請求用。 (1)安裝 json-serverjson-server 利用 Node.js 提供的...
安裝 Vue Cli npm install -g @vue/cli 創建 Vue 項目 vue create 自訂義的資料夾名稱 因為一些個人因素，之...
本篇開箱的是Swiper一個流行的、功能強大的插件庫，用於創建滑動式的輪播、幻燈片和相冊...等。 ▲ 示意圖 介紹 Swiper是一個電腦和手機端全螢幕滑...
本篇開箱的是vue-easy-lightbox，簡單應用就能有圖片預覽功能 ▲ 示意圖 介紹 基於Vue.js 3.0與TypeScript構建的圖片瀏覽(...
首頁分為註冊與會員登入頁面，此篇先介紹註冊部分。 (1)建立路由表Vue.js 是一個元件化的框架，每個頁面通常由一個或多個元件構成，且元件有各自的生命周期，包...
本篇開箱的是vue.draggable.next，是一款簡單上手vue3的拖曳插件也就是vue.draggable升級版本。 ▲ 官方典型範例示意圖 介紹...
今年其實很猶豫要不要參賽，想把去年的安裝教學做完，還是報名了。壓線最後一刻 ~~~(有可能不會完成30天的影片發文:P)(但會把Vue Cli和Node.js...
jennydisc
切版姐姐
Jasper
Olivia
iThome鐵人賽
看影片追技術