从0-1开发一个Vue3前端系统页面-9.博客页面布局

从0-1开发一个Vue3前端系统页面 - 博客页面布局

在本篇文章中，我们将一步一步地创建一个简单的博客页面布局，使用Vue3作为前端框架。我们将会实现一个布局，其中包含博客的标题、文章列表、每篇文章的摘要以及侧边栏供用户导航。

一、项目初始化

首先，我们需要确保我们已经安装了Node.js和npm。接下来，我们可以使用Vue CLI来初始化我们的项目。以下是创建Vue项目的步骤：

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

在创建项目的过程中，您可以选择手动配置，也可以选择默认的配置。

二、安装 Vuetify (可选)

为了使我们的页面更加美观，我们可以选择安装一个UI库，例如Vuetify。它为Vue应用提供了一组丰富的组件。

vue add vuetify

三、创建博客页面布局

我们将创建一个新的组件 Blog.vue，这个组件将包含我们的博客页面内容。

<template>
  <div class="blog-container">
    <header class="blog-header">
      <h1>我的博客</h1>
    </header>
    <main class="blog-main">
      <section class="blog-posts">
        <article v-for="post in posts" :key="post.id" class="blog-post">
          <h2>{{ post.title }}</h2>
          <p class="post-summary">{{ post.summary }}</p>
          <router-link :to="'/post/' + post.id">阅读更多</router-link>
        </article>
      </section>
      <aside class="blog-sidebar">
        <h3>侧边栏</h3>
        <ul>
          <li><router-link to="/">主页</router-link></li>
          <li><router-link to="/about">关于我</router-link></li>
          <li><router-link to="/contact">联系我们</router-link></li>
        </ul>
      </aside>
    </main>
  </div>
</template>

<script>
export default {
  name: "Blog",
  data() {
    return {
      posts: [
        { id: 1, title: "第一篇文章", summary: "这是第一篇博客文章的摘要。" },
        { id: 2, title: "第二篇文章", summary: "这是第二篇博客文章的摘要。" },
        { id: 3, title: "第三篇文章", summary: "这是第三篇博客文章的摘要。" },
      ],
    };
  },
};
</script>

<style scoped>
.blog-container {
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
}

.blog-header {
  text-align: center;
}

.blog-main {
  display: flex;
}

.blog-posts {
  flex: 3;
}

.blog-sidebar {
  flex: 1;
  padding-left: 20px;
}

.blog-post {
  margin-bottom: 20px;
}

.post-summary {
  color: gray;
}

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

四、配置路由

为了使我们的博客页面更加完善，我们需要在 src/router/index.js 中配置路由。确保我们有一个指向博客页面的路由，以及可能的单个文章路线。

import { createRouter, createWebHistory } from 'vue-router';
import Blog from '../views/Blog.vue';
import Post from '../views/Post.vue'; // 假设用来显示单篇文章的组件

const routes = [
  {
    path: '/',
    name: 'Blog',
    component: Blog,
  },
  {
    path: '/post/:id',
    name: 'Post',
    component: Post,  // 需要创建的单篇文章的组件
  },
];

const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes,
});

export default router;

五、运行项目

完成上述代码后，我们可以运行项目，查看效果。

npm run serve

在浏览器中访问 http://localhost:8080，我们将能够看到一个基本的博客页面，其中列出了文章标题和摘要，并且可以通过侧边栏导航。

总结

在本文中，我们成功地使用Vue3创建了一个基本的博客页面布局。我们使用了组件化的结构，使得项目易于维护和扩展。后续我们可以进一步增加更多功能，比如与后端API进行交互，增加评论功能等。希望本文能为你提供一个良好的起点。如果有任何问题，欢迎留言讨论！