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 1

源起、需求、技術堆疊

源起 要不要寫這個主題系列文章呢?其實一直很猶豫,畢章真的要花滿多時間構思以及想要寫什麼。自己過去大部份都是在接案做網站,而且常常每次做案子的時候,都是需要案子...

2022-09-01 ‧ 由 Carlos Chang 分享
DAY 2

開啟一個本機端網站 - 使用 Vite + Vue 3 + Vue Router

這並不是一個特定技術的教學文,我也是透過實作當中,不斷的找資料,達成想實作的需求喔。今天想先使用 Vite + Vue 3 + Vue Router 先將環境給...

2022-09-02 ‧ 由 Carlos Chang 分享
DAY 3

安裝撰寫 API 的環境 - 使用 Deno 程式語言

今天要來安裝 Deno 的執行環境,因為之後要使用 Deno 程式語言,來撰寫 API,所以今天就先來安裝 Deno。 什麼是 Deno Deno 是一個針對...

2022-09-03 ‧ 由 Carlos Chang 分享
DAY 4

安裝 GraphQL 執行環境

目前我們已經安裝好 Deno 的執行環境了,接下來因為要使用 Deno 來撰寫 GraphQL API,所以今天先來安裝 GraphQL 的執行環境。 使用第三...

2022-09-04 ‧ 由 Carlos Chang 分享
DAY 5

GraphQL 中的 Schema 和 Resolver

今天要來整理上一篇文章中所寫的 graphql.ts 檔案,以便後續串接資料庫。在 GraphQL 的執行環境中,通常有兩個基本概念是 Schema 和 Res...

2022-09-05 ‧ 由 Carlos Chang 分享
DAY 6

使用 Deno 連線資料庫,搭配 GraphQL API 抓取資料

今天要來建立資料庫,以及使用 GraphQL 的 query 來抓取資料庫裡的資料。 建立 MySQL 資料庫 這裡我是使用雲端服務 DigitalOcean...

2022-09-06 ‧ 由 Carlos Chang 分享
DAY 7

GraphQL 基本 CRUD

今天要來練習寫一下 GraphQL 基本的 CRUD。 先調整一個東西,就是將 users 資料表當中的 id 欄位,變成是 AUTO INCREMENT,執行...

2022-09-07 ‧ 由 Carlos Chang 分享
DAY 8

Vite + Vue3 建立頁面 - 首頁

終於可以先回到之前建立的 webmix_efficiency 資料夾了,也就是打算使用 Vue 3 來建立 Web APP,先在專案資料夾下執行以下指令: np...

2022-09-08 ‧ 由 Carlos Chang 分享
DAY 9

Vite + Vue3 建立頁面 - SFC 元件的 template 使用 pug 語法

元件 SFC 寫法 在 Vue 3 的 SFC(Single-File Component,副檔名為 .vue) 語法當中,我們一般會寫以下的程式,也就是有三個...

2022-09-09 ‧ 由 Carlos Chang 分享
DAY 10

Vite + Vue3 建立頁面 - 使用 vue-router 來建立單頁式應用程式(SPA)

之前有安裝過 vue-router 這個套件,它就是可以用來做單頁式應用程式,可以讓你的網站速度效能變好,因為在點擊站內連結時,不會每次都重新整理頁面。 目前我...

2022-09-10 ‧ 由 Carlos Chang 分享