「網頁前端開發者的第一本書」
★架構完整,包含Option與Composition的語法結構
★部署方案,包含兩大雲端服務的部署方法
★CSS整合,包含兩大CSS框架的整合說明
★實務應用,最常用的網頁UI應用方式
前端開發是入門程式語言世界最簡單的方式,而Vue3在最近幾年異軍突起,讓想要學習前端開發的工程師有一個更容易的方式進入這個世界。
本書涵蓋JS的基本語法介紹、Vue3的兩大語法Option與Composition基本介紹、網頁路由概念、部署到Firebase與Netlify雲端服務上、Server API 的串接、雲端服務Firebase SDK與Back4App SDK的串接、CSS框架Bootstrap與Tailwindcss的整合、daisyUI的基本用法、實務應用、動畫與SSR的使用等。
本書主要是針對想要學習網頁前端的開發,而又不知道如何開始的開發者,有一個非常基礎且入門的開始,從不會到會,從零開始學習Vue的網頁開發。如果你對於程式語言非常有興趣,又或者是轉職的朋友們,卻不知道從何開始,那就從學習前端開發開始吧。希望本書可以扮演一個敲門磚的引入者,帶領你進入這個奇幻的開發世界。
作者簡介:
張智翔
1981年生,國立臺灣科技大學資工所畢,畢業後從網站開發開始,到AWS雲端服務維運,再到iOS App開發,歷經軟體工程開發十多年。
期間曾經參與過新北市動漫畫劇本比賽獲得佳作,開始對寫作產生興趣,想把自己所學的一切,透過寫作傳遞出去。也曾經於Youtube開創「傑克老師教學頻道」與「JK程式教室頻道」,更加深對教學的嚮往。結合專業、寫作與教學,終於在2023年參加iThome鐵人賽,完賽兩個項目,受出版社邀請集結出版。
作者序
筆者自 1998 年接觸網頁開發,那個時代還稱為Web1.0的時代,也就是單純的使用HTML來寫網頁。後來各家廠商的技術如雨後春筍般出現,如ASP與JSP等技術,讓網頁開發出現了新的格局,也造就出許許多多的新創公司,如Facebook與Youtube等。
生長在這樣的年代,身為開發者,必須要戰戰競競的面對新的技術,深怕有一天會被這些技術所追趕過去。20多年過去了,網頁開發依舊非常火紅,但似乎已經產生新的共鳴?
Vue、React與Angular這些非常熱門的前端開發框架,都是使用JavaScript的語法來開發,這個改變相對於過去的開發年代來說,實在是非常可喜可賀。因為對於開發者,只需要熟悉JavaScript語法,就能夠入門這些前端框架,實在是非常大的進步。且相對於App開發者來說友善許多了,不用在iOS或Android兩個平台來做選擇了,即便現在已經有Flutter或React Native等跨平台開發工具,還是必須要同時會iOS或Android兩種的編譯與上架方式。
至於2023年非常盛行的生成式AI工具,對於筆者來說,真的也只是一種工具而已,它只是比搜尋引擎快而已,但也不代表它不會出錯。身為一個開發者來說,熟悉所有開發工具是非常必備的,生成式AI只會告訴你一段程式碼,而這段程式碼最終還是必須要靠「人」來放入到適合位置。所謂適合的位置就會與開發經驗有關,也跟開發整合有關。然而這一切的根本,還是必須要懂所謂的基礎知識。我不可能完全不懂Vue,然後只靠生成式AI來幫我寫程式,最後還必須要可以改得動。一個有經驗的開發者,反而會去追求這個好不好修改,也造就出許多的框架或開發流程,而這所有的目的都是為了之後維護方便。
本書主要是針對想要學習網頁前端的開發,而又不知道如何開始的開發者,有一個非常基礎且入門的開始,從不會到會,從零開始學習Vue的網頁開發。如果你對於網頁前端開發非常有興趣,但卻又不知道如何開始,網路搜尋到的資料都無從所入,那麼本書就會非常適合你。希望本書可以扮演一個敲門磚的引入者,帶領你進入這個奇幻的開發世界。
筆者自 1998 年接觸網頁開發,那個時代還稱為Web1.0的時代,也就是單純的使用HTML來寫網頁。後來各家廠商的技術如雨後春筍般出現,如ASP與JSP等技術,讓網頁開發出現了新的格局,也造就出許許多多的新創公司,如Facebook與Youtube等。
生長在這樣的年代,身為開發者,必須要戰戰競競的面對新的技術,深怕有一天會被這些技術所追趕過去。20多年過去了,網頁開發依舊非常火紅,但似乎已經產生新的共鳴?
Vue、React與Angular這些非常熱門的前端開發框架,都是使用JavaScript的語法來開發,這個改變相對於過去的開發年代來說,實在是非...
目錄
第一章:認識網頁開發
1.1網頁開發歷史
1.2 什麼是前端與後端
1.3 前端框架
1.4 JavaScript快速上手
1.5 本章重點摘要
第二章:Hello Vue3
2.1 快速使用
2.2 基礎語法
2.3 創建專案
2.4 專案結構
2.5 本章重點摘要
第三章:Option 語法
3.1 變數綁定
3.2 樣式綁定
3.3 if判斷式
3.4 for迴圈
3.5 函式
3.6 表單處理
3.7 元件
3.8 生命週期
3.9 監聽
3.10 模組化
3.11 實務應用
3.12 本章重點摘要
第四章:Composition 語法
4.1 變數綁定
4.2 函式
4.3 表單處理
4.4 元件
4.5 生命週期
4.6 監聽
4.7 模組化
4.8 實務應用
4.9 本章重點摘要
第五章:路由
5.1 什麼是路由
5.2 參數傳遞
5.3 實務應用
5.4 本章重點摘要
第六章:專案部署
6.1專案發佈
6.2 Firebase部署
6.3 Netlify部署
6.4 本章重點摘要
第七章:整合 CSS 框架
7.1 整合 bootstrap
7.2 整合 tailwindcss
7.3 整合 daisyUI
7.4 實務應用
7.5 本章重點摘要
第八章:API 與 SDK 串接
8.1 Server API 串接
8.2 Back4app 串接
8.3 Firebase 串接
8.4 本章重點摘要
第九章:實務應用
9.1 輸入框警示
9.2 讀取按鈕
9.3 按鈕群組
9.4 檔案讀取
9.5 檔案上傳
9.6 動態表單
9.7 表單控制
9.8 拖曳效果
9.9 本章重點摘要
第十章:進階應用
10.1 自訂指令
10.2 動畫
10.3 SSR
10.4 本章重點摘要
第十一章:完整範例
11.1 記事本
11.2 部落格
第十二章:Quick Note
第一章:認識網頁開發
1.1網頁開發歷史
1.2 什麼是前端與後端
1.3 前端框架
1.4 JavaScript快速上手
1.5 本章重點摘要
第二章:Hello Vue3
2.1 快速使用
2.2 基礎語法
2.3 創建專案
2.4 專案結構
2.5 本章重點摘要
第三章:Option 語法
3.1 變數綁定
3.2 樣式綁定
3.3 if判斷式
3.4 for迴圈
3.5 函式
3.6 表單處理
3.7 元件
3.8 生命週期
3.9 監聽
3.10 模組化
3.11 實務應用
3.12 本章重點摘要
第四章:Composition 語法
4.1 變數綁定
4.2 函式
4.3 表單處理
4.4 元件
4.5 生命週期
4.6 監聽
4.7 ...