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 21

Vue 頁面的登入狀態及登出

目前已經登入成功,那就先來將登入狀態處理一下,以及登出的功能。 驗證 JWT 的 API 在 typedefs.ts 檔案,先加上以下的 checkJWT 那...

2022-09-21 ‧ 由 Carlos Chang 分享
DAY 22

登出功能,練習寫一下使用 $emit 觸發自訂事件

登出功能原來是寫在 Home.vue 當中,但像這種登出功能,是很多頁面其實也會用到,像這類型的功能,如果能夠一直往父層去放的話,比較能達到所謂共用的目的。 所...

2022-09-22 ‧ 由 Carlos Chang 分享
DAY 23

使用 vue-router 來防護需登入,才可瀏覽的頁面

目前有三個頁面,分別是(以下列出本機端的範例網站): 首頁(http://127.0.0.1:5173/):這個頁面不論有無登入,都可瀏覽。 註冊頁(http...

2022-09-23 ‧ 由 Carlos Chang 分享
DAY 24

佈署(Deploy) 簡述 - 前後端分離

接下來就倒數七天的文章了,今天想先闡述一下目前的架構,以及後續的佈署。 前後端分離,所以目前有兩個網站 兩個網站描述如下: 使用 Vite + Vue 3 +...

2022-09-24 ‧ 由 Carlos Chang 分享
DAY 25

佈署 - vite build 出來的靜態網站,推到 GitHub

目前有一個資料夾 webmix_efficiency,也就是一開始使用 vite 架設出來的網站。 接下來要產出靜態網站,並 push 到 GitHub。 第一...

2022-09-25 ‧ 由 Carlos Chang 分享
DAY 26

佈署 - 使用 DigitalOcean 的 Apps 服務佈署靜態網站

在上一篇文章當中,已經將網站 push 至 GitHub 上的特定 repo 了。接下來呢,就要透過 DigitalOcean 上的 Apps 服務,經過設定之...

2022-09-26 ‧ 由 Carlos Chang 分享
DAY 27

佈署 - GraphQL API 程式打包成 Docker 映像檔(Image)

先前所寫的 GraphQL API,筆者想要用 Docker 的方式,也就是打包成映像檔(Image),然後做佈署。所以今天就來練習一下,怎麼打包成映像檔。 目...

2022-09-27 ‧ 由 Carlos Chang 分享
DAY 28

佈署 - GraphQL API 的映像檔

今天要來將 GraphQL API 的映像檔,佈署至 DigitalOcean 的 Apps 服務。 Dockerfile 建立映像檔 在 webmix_api...

2022-09-28 ‧ 由 Carlos Chang 分享
DAY 29

Vite 使用環境變數

在 webmix_efficiency 資料夾下,在串接 API 時,筆者之前都是寫 localhost 這樣的 API,所以當佈署到伺服器上時,會導致 API...

2022-09-29 ‧ 由 Carlos Chang 分享
DAY 30

完賽,道路仍在

今天是參與「2022 iThome 鐵人賽」的最後一天,就不寫程式了。 想談論一下寫的學習過程心得以及簡單的自介。 前後端分離架構及佈署 前端架構及佈署 使用了...

2022-09-30 ‧ 由 Carlos Chang 分享