当前位置：首页 > VUE

vue实现博客

2026-01-07 20:07:35VUE

Vue 实现博客的基本步骤

使用 Vue.js 实现一个博客系统可以分为前端和后端两部分。以下是基于 Vue 的前端实现方案，后端可以选择 Node.js、Django 或其他框架。

项目初始化

使用 Vue CLI 快速初始化项目：

npm install -g @vue/cli
vue create blog-frontend
cd blog-frontend
npm install vue-router axios vuex

路由配置

在 src/router/index.js 中配置基本路由：

import { createRouter, createWebHistory } from 'vue-router'
import Home from '../views/Home.vue'
import PostList from '../views/PostList.vue'
import PostDetail from '../views/PostDetail.vue'

const routes = [
  { path: '/', component: Home },
  { path: '/posts', component: PostList },
  { path: '/posts/:id', component: PostDetail }
]

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

export default router

状态管理

创建 src/store/index.js 管理博客文章状态：

vue实现博客

import { createStore } from 'vuex'

export default createStore({
  state: {
    posts: []
  },
  mutations: {
    SET_POSTS(state, posts) {
      state.posts = posts
    }
  },
  actions: {
    async fetchPosts({ commit }) {
      const response = await axios.get('/api/posts')
      commit('SET_POSTS', response.data)
    }
  }
})

文章列表组件

创建 src/views/PostList.vue：

<template>
  <div>
    <h1>文章列表</h1>
    <ul>
      <li v-for="post in posts" :key="post.id">
        <router-link :to="`/posts/${post.id}`">{{ post.title }}</router-link>
      </li>
    </ul>
  </div>
</template>

<script>
import { mapState } from 'vuex'

export default {
  computed: {
    ...mapState(['posts'])
  },
  created() {
    this.$store.dispatch('fetchPosts')
  }
}
</script>

文章详情组件

创建 src/views/PostDetail.vue：

<template>
  <div v-if="post">
    <h1>{{ post.title }}</h1>
    <p>{{ post.content }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      post: null
    }
  },
  async created() {
    const response = await axios.get(`/api/posts/${this.$route.params.id}`)
    this.post = response.data
  }
}
</script>

API 请求封装

创建 src/api/index.js 封装 API 请求：

vue实现博客

import axios from 'axios'

const api = axios.create({
  baseURL: 'http://localhost:3000/api'
})

export default {
  getPosts() {
    return api.get('/posts')
  },
  getPost(id) {
    return api.get(`/posts/${id}`)
  }
}

样式设计

可以使用 CSS 框架如 Tailwind CSS 或 Bootstrap Vue：

npm install tailwindcss

在 main.js 中引入：

import './index.css'

部署准备

配置 vue.config.js 用于生产环境：

module.exports = {
  publicPath: process.env.NODE_ENV === 'production'
    ? '/blog/'
    : '/'
}

后端对接建议

使用 Express.js 创建简单的 API 服务器
数据库可以选择 MongoDB 或 MySQL
实现 RESTful API 接口：
- GET /api/posts - 获取所有文章
- GET /api/posts/:id - 获取单篇文章
- POST /api/posts - 创建新文章
- PUT /api/posts/:id - 更新文章
- DELETE /api/posts/:id - 删除文章