Vue 3 30天精進之旅：Day 29

在學習了近一個月的Vue 3知識后，今天是我們學習旅程的第29天。在這一天，我們將專注于實踐，通過一個小型項目來鞏固之前的學習成果，并為之后的展示做好準備。

一、項目目標

我們將構建一個簡單的個人博客應用，具備以下基本功能：

文章列表展示：從偽API獲取文章數據并在頁面上展示。
文章詳情查看：用戶可以點擊文章標題，查看文章的詳細內容。
文章創建：允許用戶通過表單創建新文章并添加到文章列表中。
簡單的路由導航：使用Vue Router實現頁面間的導航。

二、項目準備

在開始我們的小型博客項目之前，確保你已經做好以下準備工作，以便順利進行項目開發。以下是我們需要完成的幾步準備工作：

1. 環境搭建

首先，確保你的開發環境已經搭建好。你需要安裝以下工具和依賴：

Node.js：Vue.js依賴Node.js作為運行環境。請確保你安裝了Node.js的LTS（長期支持）版本，可以在Node.js官網下載并安裝。
npm或yarn：npm是Node.js自帶的包管理工具，而yarn是一個更快的替代品。無論你選擇哪一個，都可以用來安裝項目依賴。

安裝完成后，可以通過以下命令檢查版本，確保它們已正確安裝：

node -v
npm -v
# 或者，如果你使用yarn
yarn -v

2. 創建Vue項目

接下來，我們將使用Vue CLI快速生成一個新的Vue項目。如果你還沒有安裝Vue CLI，可以通過以下命令全局安裝：

npm install -g @vue/cli
# 或者使用yarn
yarn global add @vue/cli

安裝完成后，使用以下命令創建一個新的項目：

vue create my-blog

在創建過程中，Vue CLI會提示你選擇預設。你可以選擇“Default (Vue 3)”選項，或者根據個人需求手動選擇要安裝的功能（如路由、狀態管理等）。

3. 安裝依賴

創建項目后，進入項目目錄并安裝我們需要的依賴。我們將使用Vue Router處理路由，并使用axios進行HTTP請求。可以通過以下命令安裝它們：

cd my-blog
npm install vue-router axios
# 或者使用yarn
yarn add vue-router axios

4. 理解項目結構

在項目創建完成后，查看項目的文件結構。一個典型的Vue項目結構如下所示：

my-blog/
├── node_modules/      # 項目依賴的第三方庫
├── public/            # 存放靜態文件
│   └── index.html     # 入口HTML文件
├── src/               # 源代碼目錄
│   ├── assets/        # 靜態資源（如圖片、樣式等）
│   ├── components/    # Vue組件
│   ├── views/         # 視圖組件
│   ├── router/        # 路由配置
│   ├── App.vue        # 主應用組件
│   └── main.js        # 項目入口文件
├── .gitignore         # Git忽略文件
├── package.json       # 項目依賴和配置
└── README.md          # 項目的說明文檔

src/：這是我們主要的開發目錄，所有的源代碼文件都存放在這里。我們將在此目錄下創建組件和視圖文件。
components/：存放可復用的Vue組件。
views/：存放頁面級的組件，通常對應路由中的視圖。
router/：存放路由配置文件。

了解項目結構后，你會更清晰地知道在哪里添加新功能和組件。

5. 設置基本樣式

雖然我們的項目主要關注功能實現，但基本的樣式也能為用戶提供更好的體驗。你可以選擇使用CSS框架（如Bootstrap、Tailwind CSS等）來加速樣式開發。以下是安裝Bootstrap的步驟：

npm install bootstrap

然后在你的src/main.js中引入Bootstrap樣式：

import 'bootstrap/dist/css/bootstrap.min.css';

現在，你的項目就有了基礎的樣式支持。

6. 了解API

在我們的博客應用中，我們將使用一個偽API來獲取和提交文章數據。可以使用JSONPlaceholder作為模擬的RESTful API。它提供了免費的虛擬數據接口，適合用于開發和測試。

了解API的基本用法后，可以嘗試用Postman等工具測試API，熟悉請求和響應的格式。這將幫助你在項目中更順利地進行數據交互。

7. 規劃項目功能

在開始編碼之前，先明確項目的功能需求和界面布局。這可以通過繪制草圖或使用工具（如Figma、Sketch等）進行原型設計。我們將在項目中實現以下基本功能：

文章列表：展示所有文章的標題和簡短內容，用戶可以點擊查看詳細信息。
文章詳情：展示點擊的文章的完整內容。
創建文章：用戶可以通過表單提交新文章，添加到文章列表中。
路由導航：實現不同頁面間的導航。

明確了功能需求后，你可以開始逐步實現這些功能。

通過上述準備工作，你將為即將到來的項目開發奠定堅實的基礎。接下來，我們將進入實際的編碼階段，開始實現博客應用的具體功能。準備好了嗎？讓我們開始吧！

三、項目結構

創建一個新的Vue項目并按照以下結構組織你的代碼：

src/
├── components/
│   ├── ArticleList.vue
│   ├── ArticleDetail.vue
│   └── ArticleForm.vue
├── views/
│   ├── Home.vue
│   └── ArticleView.vue
├── router/
│   └── index.js
└── App.vue

四、代碼實現

1. 設置路由

在src/router/index.js中設置路由：

import { createRouter, createWebHistory } from 'vue-router';
import Home from '../views/Home.vue';
import ArticleView from '../views/ArticleView.vue';const routes = [{ path: '/', component: Home },{ path: '/article/:id', component: ArticleView, props: true },
];const router = createRouter({history: createWebHistory(process.env.BASE_URL),routes,
});export default router;

2. 創建文章列表組件

在src/components/ArticleList.vue中實現文章列表展示：

<template><div><h1>文章列表</h1><ul><li v-for="article in articles" :key="article.id"><router-link :to="`/article/${article.id}`">{{ article.title }}</router-link></li></ul><ArticleForm @article-added="fetchArticles" /></div>
</template><script>
import axios from 'axios';
import ArticleForm from './ArticleForm.vue';export default {components: { ArticleForm },data() {return {articles: [],};},methods: {async fetchArticles() {const response = await axios.get('https://jsonplaceholder.typicode.com/posts');this.articles = response.data;},},mounted() {this.fetchArticles();},
};
</script>

3. 創建文章詳情組件

在src/components/ArticleDetail.vue中實現文章詳情展示：

<template><div><h1>{{ article.title }}</h1><p>{{ article.body }}</p><router-link to="/">返回文章列表</router-link></div>
</template><script>
import axios from 'axios';export default {props: ['id'],data() {return {article: {},};},async mounted() {const response = await axios.get(`https://jsonplaceholder.typicode.com/posts/${this.id}`);this.article = response.data;},
};
</script>

4. 創建文章創建表單組件

在src/components/ArticleForm.vue中實現文章創建表單：

<template><form @submit.prevent="submitForm"><input v-model="title" placeholder="文章標題" required /><textarea v-model="body" placeholder="文章內容" required></textarea><button type="submit">創建文章</button></form>
</template><script>
export default {data() {return {title: '',body: '',};},methods: {submitForm() {const newArticle = {id: Date.now(), // 簡單生成 IDtitle: this.title,body: this.body,};this.$emit('article-added', newArticle); // 向父組件發送事件this.title = '';this.body = '';},},
};
</script>

5. 主視圖

在src/views/Home.vue中使用ArticleList組件：

<template><div><ArticleList /></div>
</template><script>
import ArticleList from '../components/ArticleList.vue';export default {components: { ArticleList },
};
</script>

6. 文章視圖

在src/views/ArticleView.vue中使用ArticleDetail組件：

<template><div><ArticleDetail :id="id" /></div>
</template><script>
import ArticleDetail from '../components/ArticleDetail.vue';export default {components: { ArticleDetail },props: ['id'],
};
</script>

7. 配置`App.vue`

確保在src/App.vue中引入并使用router：

<template><router-view />
</template><script>
import { createRouter, createWebHistory } from 'vue-router';
import router from './router';export default {name: 'App',router,
};
</script>