iT邦幫忙

鐵人檔案

2022 iThome 鐵人賽
回列表
Modern Web

使用 Vue 3 從 0 到 1 架設網站!!! 系列

「使用 Vue 3 從 0 到 1 架設網站!!!」,盼讀者可以透過該主題,瞭解網站從0到1的整個建置過程。以及會使用到哪些技術堆疊。所以並不會單一的介紹特定技術,而是會介紹在架站的過程當中,使用到了哪些技術,及技術所扮演的角色。
例如:
1、使用 Vite 來當做 dev server。
2、使用 Git 來做版控。
3、使用 Vue 來做元件。
4、使用 Vue Router 來做單頁應用程式(SPA)。
5、使用 GoDaddy 來購買網域。
6、使用雲端主機來上線網站。
當然不只這些,以上所使用到的技術都可以替換成自己熟悉的工具。
希望對讀者有幫助,也可以一起動手做。

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

Vite + Vue3 建立頁面 - 調整 WebBuild.vue 版面

今天就先來將 WebBuild.vue 這個頁面元件檔的版面,做些調整吧,也就是寫 CSS(使用 sass 語法)。可以先看一下結果畫面。 WebBuild.v...

2022-09-11 ‧ 由 Carlos Chang 分享
DAY 12

登入機制驗證,淺談 JSON Web Tokens(JWT)

後續要來實作登入的相關功能。這次打算來使用 JWT 的機制。 過去使用 session 一般最常見的登入方式,就是使用 session 機制,也就是會在伺服器端...

2022-09-12 ‧ 由 Carlos Chang 分享
DAY 13

寫一個 GraphQL API,回傳 JSON Web Tokens(JWT)

這邊呢,其實我先忽略註冊、登入密碼驗證。 主要先著重在我初次使用的產生 JWT 這樣的機制。 GraphQL 的 Schema 定義 在 webmix_api...

2022-09-13 ‧ 由 Carlos Chang 分享
DAY 14

Vite + Vue3 建立頁面 - 首頁微調、建立註冊頁面、規劃註冊流程

今天想要來建立註冊頁面,以及將首頁做點微調,並規劃一下後續的註冊流程。 微調首頁 更新 webmix_efficiency 資料夾中的 src/views/Ho...

2022-09-14 ‧ 由 Carlos Chang 分享
DAY 15

Deno 程式讀取環境設定檔 .env

一般在架設網站的時候,都會有所謂的環境設定檔,常見的檔名為 .env,當然也有可能是其它的。 環境設定檔做什麼? 環境設定檔最主要的用途,就是用來儲存一些設定類...

2022-09-15 ‧ 由 Carlos Chang 分享
DAY 16

使用 Deno 建立資料庫 migration 檔

由於後續要做註冊及登入,所以呢,今天先來將註冊登入會用到的資料庫 migration 檔建立起來。 什麼是 migration 及 seed 檔 一般來說,在建...

2022-09-16 ‧ 由 Carlos Chang 分享
DAY 17

註冊的 GraphQL API,密碼使用 bcrypt 雜湊加密(with salt)

今天要來寫註冊的 GraphQL API,以及註冊時,都會有密碼,密碼的部份,會使用 bcrypt 雜湊演算法來加密。 這邊會避免過多的邏輯判斷,所以就先著重在...

2022-09-17 ‧ 由 Carlos Chang 分享
DAY 18

Vue 的註冊頁面,練習使用 v-model 做雙向綁定 及 computed 做密碼檢查是否相同

在 webmix_efficiency 資料夾下,src/views/register.vue 就是註冊頁面,今天來寫 Vue 的基本練習,也就是 JS 的部份...

2022-09-18 ‧ 由 Carlos Chang 分享
DAY 19

Vue 串接 GraphQL API(註冊會員) - 使用 fetch 語法

已經寫好了註冊的 API,接下來要在 Vue 中,使用原生 JS 的 fetch 語法來串接。 事件綁定 在 webmix_efficiency 資料夾裡,sr...

2022-09-19 ‧ 由 Carlos Chang 分享
DAY 20

登入的 API 串接,取得 JWT 後,存至 localStorage

今天要來寫登入的 API 串接,取得 JWT 後,存至 localStorage。 將 Key 存在另個檔案 目前先用程式動態產生 key 的方式,之後有機會再...

2022-09-20 ‧ 由 Carlos Chang 分享