概述

前面的文章紀錄了使用 Java Spring boot 建置 API ，後面將會使用 Vue 來去建置使用者的操作頁面，會需要呼叫前幾篇建置的 API 來達到其 Blog 的各個功能。以下將以 Vue 的基礎建置開始講述﹔

Vue 建置

建置 Vue 專案大致可以歸納出以下方式﹔

1. 在 Html 的 標籤中直接引入。
2. 使用 npm 安裝 vue 並自行設置 webpack。
3. Vue CLI
4. Vite

比較常用的方式為 Vue CLI 以及 Vite 的方式，他們的功能幾乎是一樣的，但 Vite 的建置較為輕量化也更快，所以此篇使用 Vite 的方式來建置 Vue 專案。

以下為建置的步驟:

Step1: 下載 NodeJS https://nodejs.org/en

可以在 Cmd 中輸入以下，確認是否已成功建置 Node 的環境。

node -V

Step2: 建立 Vite 專案結構

//npm
$ npm init vite@latest

//yarn
$ yarn create vite

Step3: 在初始化 Vite 專案後，Cmd 會跑出以下訊息，需要在後方輸入自定義的專案名稱

? Project name: » 專案名稱

Step4: 選擇 framework，Vite 不只支援 Vue 的打包建置，也有 React 等框架

? Select a framework: » - Use arrow-keys. Return to submit.

Vanilla
Vue
React
Preact
Lit
Svelte
Others

Step5: 選擇 varient

? Select a variant: » - Use arrow-keys. Return to submit.

JavaScript
TypeScript
Customize with create-vue ↗
Nuxt ↗

Step6: 建置完成後要依序執行以下 cmd 內容，來建置專案需要的模組套件或是設定

npm install 下載相對應的 package 等

nom run dev 執行專案

cd 建置的 vite 專案的位置
npm install
npm run dev

完成這 6 個步驟就可以輸入建置的 url 來打開專案網頁~

今天正式進入 Vue 的說明，但如果發現 API 的建置有未補充到的也會在後續做補充。

有問題歡迎在底下留言討論，明天見~