Vue330天精进之旅：Day29-项目实战

在学习了近一个月的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(' jsonplaceholder.typicode /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(` jsonplaceholder.typicode /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(), // 简单生成 ID title: 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> 五、总结与展望

通过今天的项目实践，你应该对Vue 3的组件、路由和API交互有了更深的理解。接下来的最后一天，我们将整合所有的学习内容，准备一个精彩的项目展示。希望你能思考如何进一步优化和扩展这个博客应用，为未来的项目打下基础。