当前位置：首页 > news >正文

Vue 3 30天精进之旅：Day 29 - 项目实战

news 来源：原创 2025/5/17 14:10: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(), // 简单生成 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>