iT邦幫忙

vue.js相關文章
共有 1414 則文章

技術 【Petite-Vue】大小只有 ~6KB 的 mini Vue!

文章出處 Vue 可以作為獨立的腳本文件使用,無需構建步驟!如果你有一個非前後端分離的歷史項目,並且它已經渲染了大部分的 HTML,或者你的前端邏輯並不...

技術 Nuxt3 使用紀錄 - 使用 mkcert 讓本機開發也可以有 https

真的超簡單~ 要有這流程,主要是拿來測試串接 Facebook sdk、Apple rest api 等等使用。因為我是用 Mac 電腦,所以使用 Mac 安裝...

技術 [ Nuxt.js 2.x 系列文章 ] nuxt.config.js 設定檔

版本:nuxt 2.15.8 全名為 Nuxt configuration file,功能同 Vue 專案內 vue.config.js 檔,如果我們使用...

技術 電商專案vue2.0 + cil步驟筆記(一)

大型店商專案一些重點步驟(數據資料取自北京尚矽谷) (步驟和說明有很多省略 目前在複習精簡中 之後會詳細更新 先請見諒) 1開啟cmd 初始化 vue c...

技術 [ Nuxt.js 2.x 系列文章 ] Nuxt.js 專案架設與目錄結構

版本:nuxt 2.15.8 說到 Nuxt,必須先從 Vue.js 說起,Vue.js 為專注在視圖層(View) 的 JS 框架,為 SPA(Singl...

鐵人賽 Modern Web DAY 30

技術 Day 30: Vue 3 響應式原理 - effect 如何響應 (無敵簡化版)

註:本篇屬於沒有很重要,但我很好奇系列 這篇不會著重在原始碼,主要是介紹 Vue 是用什麼概念去蒐集依賴。主要學習資源是 Vue Mastery、官網文件和部份...

鐵人賽 Modern Web DAY 29
Nuxt 3 學習筆記 系列 第 29

技術 [Day 29] Nuxt 3 發布網站前的建構打包 (Build) 與靜態網站生成 (Static Site Generation)

前言 當網站開發完成或有導入 CI/CD,在準備發布網站前,我們會將 Nuxt 網站的開發專案透過 Nuxt 提供的指令,我們可以來建構出正式環境所需要的版本,...

鐵人賽 Modern Web DAY 29

技術 Day 29: Vue 響應式基礎 - watch & computed 不踩坑

前言 在 Day 9 和 10 的文章中,我們提到 Vue 3 響應式基礎 - reactive & ref,主要用來攔截資料的讀取跟寫入,讓 Vue...

鐵人賽 Modern Web DAY 28
Nuxt 3 學習筆記 系列 第 28

技術 [Day 28] Nuxt 3 渲染模式 (Rendering modes) 與網站使用體驗核心指標 (Core Web Vitals)

前言 Nuxt 3 作為一個完整的全端框架,也兼具了開箱即用的特性,當你選擇 Nuxt 3 開發網站準備建構正式環境的專案時,可以根據使用方式與解決情境,選擇是...

鐵人賽 Modern Web DAY 27
Nuxt 3 學習筆記 系列 第 27

技術 [Day 27] Nuxt 3 測試 (Testing) 與錯誤處理 (Error handling)

前言 網站開發的過程或部署前若能結合測試將能大大的降低網站出錯的可能性,這篇文章因為官方的測試相關工具尚未完善,故主要針對錯誤處理做講解,處理錯誤固然重要,但能...

鐵人賽 Modern Web DAY 27

技術 Day 27: 從 VueUse - useAsyncState 認識 Composable 和非同步處理

前言 會想寫這個題目有兩個原因: 想認識 composable 函式,體驗 Composition API 的強大之處,為什麼可以讓跨元件複用程式碼變得更方便...

鐵人賽 Modern Web DAY 26

技術 把專案Nuxt3起來&config設定-D26

Nuxt 本來參加鐵人的初衷就是想要幫自己的side project搬個家,然後以此繼續寫Test & 架設後端。所以這邊之後就是實作筆記啦! 最後還是...

鐵人賽 Modern Web DAY 25
Nuxt 3 學習筆記 系列 第 25

技術 [Day 25] Nuxt 3 邁向國際化 - 使用 Nuxt I18n 實作多國語系

前言 當一個網站需要面向不同國家或不同語言的使用者,我們就需要做國際化 (Internationalization),將網站內容進行翻譯或語言的對應,讓使用者能...

鐵人賽 Modern Web DAY 25

技術 Day 25: 來發 API 吧!Pinia 語法學完馬上用

前言 在 Day 21: 來發 API 吧!Async Composition API setup() 中,是在元件準備渲染時,才在 setup 內發 API...

鐵人賽 Modern Web DAY 24
Nuxt 3 學習筆記 系列 第 24

技術 [Day 24] Nuxt 3 搜尋引擎最佳化 (SEO) 與 HTML Meta Tag

前言 選擇使用 Nuxt 3 作為網站開發框架的開發者,多數都是為了要使用 SSR 或 SSG 來加強對 SEO 的優化設置,這篇將會講述 Nuxt 提供的幾個...

鐵人賽 Modern Web DAY 23
Nuxt 3 學習筆記 系列 第 23

技術 [Day 23] Nuxt 3 實作部落格 - 頁面的導航守衛與切換效果

前言 前一篇,我們完成了新增文章的頁面與流程,在網站開發的過程中,有些頁面是具有瀏覽的限制,例如,我們不希望一般的使用者能進到管理者頁面專用的頁面進行操作,這時...

鐵人賽 Modern Web DAY 23

技術 Day 23: 來發 API 吧!Lifecycle Hooks and Navigation Guards 你要哪一個?

Outline Lifecycle Hooks 快速總覽 Navigation guards 快速總覽 發 API 挑哪個? 今天會著重介紹觸發時機,可以在...

鐵人賽 Modern Web DAY 22
Nuxt 3 學習筆記 系列 第 22

技術 [Day 22] Nuxt 3 實作部落格 - 導覽列模板與新增文章

前言 上一篇,我們完成了基本的會員登入,接下來將進入網站的切版,這篇文章會使用布局模板來實現,上方導覽列與下方顯示網站內容的排版方式,接下來就會快速的進入到新增...

鐵人賽 Modern Web DAY 22

技術 Day 22: Composition API async setup() + await 的限制

上集回顧 Composition API 元件中的 setup() 函式可以作為非同步函式使用,在內部可以使用關鍵字 await 等待非同步陳述式執行。 一切聽...

鐵人賽 Modern Web DAY 21
Nuxt 3 學習筆記 系列 第 21

技術 [Day 21] Nuxt 3 實作部落格 - 資料庫與會員系統

前言 大家經過Nuxt 3 學習筆記這一系列文章,應該對於 Nuxt 3 有初步的理解,接下來我們將進入實戰部分,我將會以 Nuxt 3 來實作部落格網站,讓已...

鐵人賽 Modern Web DAY 21

技術 Day 21: 來發 API 吧!Async Composition API setup() feat. <Suspense>

前言 接下來幾天會以「在 Vue 3 Composition API 處理非同步( 發 API )」為主軸,從新手的角度出發,告訴大家可以在哪些地方、時機發 A...

鐵人賽 Modern Web DAY 20
Nuxt 3 學習筆記 系列 第 20

技術 [Day 20] Nuxt 3 Cookie 的設置與 JWT 的搭配

前言 Cookie 在瀏覽網站時多會使用到,不論是用來儲存臨時的資訊或是辨識使用者等,這一個儲存在瀏覽器的一小段文字資料,會在每次發送 HTTP 請求時自動夾帶...

鐵人賽 Modern Web DAY 20

技術 Day 20: 在發 API 之前 - 先學 axios 基礎與封裝管理 API

前言 接下來幾篇文章以「在 Vue 3 Composition API 處理非同步( 發 API )」為主軸,會從新手的角度出發,告訴大家可以在哪些地方、時機發...

技術 Vue3 串接 Google OAuth 登入 【2022 最新】

前言 大家好,我是 Ryan,這篇文章是我參與 iThome 2022 鐵人賽時與大家分享使用 Nuxt 3 串接 Google OAuth 登入的額外分享,因...

鐵人賽 Modern Web DAY 19
Nuxt 3 學習筆記 系列 第 19

技術 [Day 19] Nuxt 3 串接 Google OAuth 登入

前言 跟隨著本系列學習 Nuxt 3 的夥伴們,應該對 Nuxt 3 有一點熟悉了,接下來會分享如何建立一個簡易的部落格網站,再結合 Nuxt 3 提供可以針對...

鐵人賽 Modern Web DAY 18
Nuxt 3 學習筆記 系列 第 18

技術 [Day 18] Nuxt 3 Runtime Config & App Config

前言 在 Nuxt 3 中提供了兩種可以方式設定環境變數或前端需要使用的共用設定,分別是在 Nuxt 啟動時會在後端載入使用的 Runtime Config 及...

鐵人賽 Modern Web DAY 18

技術 Day 18: v-slot 到底用在哪?從應用學 v-slot 語法

前言 要在父子元件之間傳遞變數或內容的時候,我們可以使用 props,但如果想要傳遞進去的是一段 template 片段,就要使用到 slot。 最簡單明瞭的...

鐵人賽 Modern Web DAY 17
Nuxt 3 學習筆記 系列 第 17

技術 [Day 17] Nuxt 3 狀態管理 - Store & Pinia

前言 上一篇我們介紹了如何在 Nuxt 3 使用 useState 來建立一個元件間的共享狀態,隨著專案的健壯增大,我們就需要一個更好的方式來管理與儲存這些狀態...

鐵人賽 Modern Web DAY 17

技術 Day 17: 元件溝通的原則 feat. props & emit

元件溝通的原則 1. 資料由上而下單向傳遞 這在前端框架中,是很常見的管理原則,Vue 文件 用「One-Way Data Flow」來描述;React 文件...

鐵人賽 Modern Web DAY 16

技術 Day 16: 從 vuejs 原始碼看 v-on 修飾符串接

誰適合看這篇? 試問: @click.prevent.self 和 @click.self.prevent 的差別是什麼?...回答不出來的人,還有想即時打開...