iT邦幫忙

鐵人檔案

2023 iThome 鐵人賽
回列表
Vue.js

試試用Vue建立網站吧 系列

練習網上學習到的vue3知識來動手建立一個網站,從中複習vue3與發現不熟練之處,藉此紀錄並加以學習。

鐵人鍊成 | 共 30 篇文章 | 9 人訂閱 訂閱系列文 RSS系列文
DAY 1

Day1-試試Vue3-初衷與目標

技術背景資料庫工程師轉前端技術。所學從六角學院修習切版、 JavaScript 、 Vue 三種前端技術。 參賽初衷所學至今跟著課程作業有作出一些網站前後台模板...

2023-09-16 ‧ 由 jennydisc 分享
DAY 2

Day2-試試Vue3-建立vite專案

(1)建立 vite 專案透過命令提示字元以 npm 方式建立 vite 專案。 STEP1. 開啟命令提示字元視窗Windows 作業系統中點擊開始>搜...

2023-09-17 ‧ 由 jennydisc 分享
DAY 3

Day3-試試Vue3-引入Bootstrap套件

(1)安裝 Bootstrap 套件bootstrap 最新版本請參考這個網站。 Visual Studio 「工具列/終端機/新增終端機」開啟終端機並輸入以下...

2023-09-18 ‧ 由 jennydisc 分享
DAY 4

Day4-試試Vue3-首頁(註冊)畫面

首頁分為註冊與會員登入頁面,此篇先介紹註冊部分。 (1)建立路由表Vue.js 是一個元件化的框架,每個頁面通常由一個或多個元件構成,且元件有各自的生命周期,包...

2023-09-19 ‧ 由 jennydisc 分享
DAY 5

Day5-試試Vue3-建立會員API

此篇 API 部分主要紀錄如何建立簡易的 API 供專案發送網路請求用。 (1)安裝 json-serverjson-server 利用 Node.js 提供的...

2023-09-20 ‧ 由 jennydisc 分享
DAY 6

Day6-試試Vue3-表單使用Vee Validate驗證

基本上表單驗證前後端都需要做,前端可做簡單的基礎驗證(如 mail 須為正確格式、必填欄位等),後端則負責較嚴謹的驗證。此篇針對註冊頁面的表單增加 Vee Va...

2023-09-21 ‧ 由 jennydisc 分享
DAY 7

Day7-試試Vue3-首頁增加會員頁面

(1)新增會員頁面檔案路徑 src / views 底下新增 front 資料夾,並於此增加 LoginView.vue 檔案。html 架構同註冊頁面(表單驗...

2023-09-22 ‧ 由 jennydisc 分享
DAY 8

Day8-試試Vue3-會員登入後轉跳主頁

(1)新增會員主頁檔案會員頁面登入後的畫面稱為會員主頁(以下簡稱主頁)。路徑 src / views / front 底下新增 MainView.vue 檔案。...

2023-09-23 ‧ 由 jennydisc 分享
DAY 9

Day9-試試Vue3-主頁歡迎訊息顯示會員名(Pinia)

這裡要將會員登入頁面(LoginView.vue 檔)中 axios.get() 取得的會員 name 儲存到 Pinia 裡的 store 。再透過該 sto...

2023-09-24 ‧ 由 jennydisc 分享
DAY 10

Day10-試試Vue3-歡迎訊息顯示會員名(Pinia)下

分享寫「Day9-試試Vue3-主頁歡迎訊息顯示會員名(Pinia)」時整理幾種其他歡迎訊息顯示會員名的寫法,及從中學到的新知識點。會分兩篇介紹。 (1)登入會...

2023-09-25 ‧ 由 jennydisc 分享