使用Vue 3实现一个简单的博客架构，包含文章列表和文章详情

JJCTO袁龙

于 2024-08-20 09:06:10 发布

阅读量427

点赞数 4

分类专栏： Vue 文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/yuanlong12178/article/details/141343109

版权

Vue 专栏收录该内容

463 篇文章 5 订阅

订阅专栏

使用Vue 3实现一个简单的博客架构

随着现代 web 开发的不断推动，Vue 3 作为一个渐进式框架，因其简洁易学，响应式强大而广受欢迎。在这篇博客中，我们将使用 Vue 3 实现一个简单的博客架构，包含文章列表和文章详情页面。我们将借助 Vue 3 的 setup 语法糖，使得代码更加简洁，易于维护。

项目结构

在开始之前，我们需要确定项目的基本结构。为了保持简洁，我们将主要有以下几个组件：

App.vue — 应用的主组件
ArticleList.vue — 文章列表组件
ArticleDetail.vue — 文章详情组件

安装 Vue 3

首先，你需要创建一个新的 Vue 3 项目。你可以使用 Vue CLI 来快速创建项目：

npm install -g @vue/cli
vue create simple-blog
cd simple-blog

选择 Vue 3 配置，等安装完成后进入项目目录。

创建组件

1. App.vue

在根组件 App.vue 中，我们将设置基本路由结构。使用 Vue Router 进行页面的切换。

<template>
  <div id="app">
    <nav>
      <router-link to="/">文章列表</router-link>
    </nav>
    <router-view />
  </div>
</template>

<script setup>
import { defineComponent } from 'vue'
import { createRouter, createWebHistory } from 'vue-router'
import ArticleList from './components/ArticleList.vue'
import ArticleDetail from './components/ArticleDetail.vue'

const routes = [
  { path: '/', component: ArticleList },
  { path: '/article/:id', component: ArticleDetail },
]

const router = createRouter({
  history: createWebHistory(),
  routes,
})

export default defineComponent({
  setup() {
    return { router }
  }
})
</script>

<style>
nav {
  padding: 1rem;
  background-color: #f8f9fa;
}
nav a {
  margin: 0 1rem;
  text-decoration: none;
}
</style>

2. ArticleList.vue

在 ArticleList.vue 中，我们将展示一个简单的文章列表。通过使用 ref 和 computed 来管理和显示文章数据。

<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>
  </div>
</template>

<script setup>
import { ref } from 'vue'

const articles = ref([
  { id: 1, title: '第一篇文章' },
  { id: 2, title: '第二篇文章' },
  { id: 3, title: '第三篇文章' },
])
</script>

<style>
ul {
  list-style-type: none;
  padding: 0;
}
</style>

3. ArticleDetail.vue

在 ArticleDetail.vue 中，我们将根据文章 ID 显示相应的文章详细信息。我们将使用 useRoute 钩子来获取路由参数。

<template>
  <div>
    <h1>{{ article.title }}</h1>
    <p>{{ article.content }}</p>
    <router-link to="/">返回列表</router-link>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useRoute } from 'vue-router'

const articles = [
  { id: 1, title: '第一篇文章', content: '这是第一篇文章的内容。' },
  { id: 2, title: '第二篇文章', content: '这是第二篇文章的内容。' },
  { id: 3, title: '第三篇文章', content: '这是第三篇文章的内容。' },
]

const route = useRoute()
const article = ref({})

onMounted(() => {
  const articleId = parseInt(route.params.id)
  article.value = articles.find(a => a.id === articleId) || {}
})
</script>

<style>
h1 {
  margin-top: 20px;
}
</style>