当前位置：首页 > VUE

vue博客实现

2026-02-10 16:46:43VUE

搭建基础项目结构

使用 Vue CLI 快速初始化项目，确保已安装 Node.js 和 npm/yarn。执行以下命令创建项目：

vue create vue-blog

选择默认配置或手动配置（推荐包含 Vue Router 和 Vuex）。进入项目目录后安装基础依赖：

cd vue-blog
npm install axios vue-markdown-loader --save

配置路由与页面布局

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

const routes = [
  { path: '/', component: Home },
  { path: '/post/:id', component: PostDetail },
  { path: '/admin', component: AdminPanel }
]

创建对应的视图组件（Home.vue, PostDetail.vue, AdminPanel.vue）到 src/views 目录。主布局通常在 App.vue 中实现，包含导航栏和路由视图：

<template>
  <div id="app">
    <nav-bar/>
    <router-view/>
  </div>
</template>

实现文章数据管理

使用 Vuex 管理文章数据。在 src/store/index.js 中创建状态管理：

vue博客实现

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

通过 this.$store.dispatch('fetchPosts') 在组件中调用数据。

集成Markdown支持

安装 markdown 解析库：

npm install marked highlight.js

创建 src/components/MarkdownRenderer.vue：

vue博客实现

<template>
  <div class="markdown" v-html="compiledMarkdown"></div>
</template>

<script>
import marked from 'marked'
import hljs from 'highlight.js'

marked.setOptions({
  highlight: code => hljs.highlightAuto(code).value
})

export default {
  props: ['content'],
  computed: {
    compiledMarkdown() {
      return marked(this.content)
    }
  }
}
</script>

实现后台管理功能

创建文章编辑组件 AdminEditor.vue：

<template>
  <div>
    <input v-model="post.title" placeholder="标题">
    <textarea v-model="post.content"></textarea>
    <button @click="savePost">保存</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      post: { title: '', content: '' }
    }
  },
  methods: {
    async savePost() {
      await axios.post('/api/posts', this.post)
      this.$router.push('/')
    }
  }
}
</script>