利用vue2写一个个人博客

好的，下面是一个简单的个人博客的Vue2实现：

首先，在终端中使用以下命令创建一个新的Vue项目：

vue create my-blog

然后，在项目目录中安装以下依赖项：

npm install --save vue-router marked highlight.js

接下来，我们可以创建一个路由配置来管理不同的页面。在src目录下创建一个名为router.js的文件，并添加以下代码：

import Vue from 'vue'
import Router from 'vue-router'
import Home from './views/Home.vue'
import Post from './views/Post.vue'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'home',
      component: Home
    },
    {
      path: '/post/:id',
      name: 'post',
      component: Post
    }
  ]
})

这里我们定义了两个路由，一个是根路由指向Home组件，另一个是带有参数的路由指向Post组件。

接下来，我们可以创建两个组件分别用于显示博客主页和博客详情。在src/views目录下创建Home.vue和Post.vue文件，并添加以下代码：

Home.vue

<template>
  <div class="home">
    <h1>Welcome to my blog!</h1>
    <ul>
      <li v-for="post in posts" :key="post.id">
        <router-link :to="'/post/' + post.id">{{ post.title }}</router-link>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      posts: [
        {
          id: 1,
          title: 'My first blog post',
          content: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.'
        },
        {
          id: 2,
          title: 'My second blog post',
          content: 'Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.'
        },
        {
          id: 3,
          title: 'My third blog post',
          content: 'At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores.'
        }
      ]
    }
  }
}
</script>

Post.vue

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

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

export default {
  data() {
    return {
      post: {}
    }
  },
  created() {
    const postId = this.$route.params.id
    this.post = this.posts.find(post => post.id.toString() === postId)
    this.content = marked(this.post.content, {
      highlight: function(code, language) {
        if (language && hljs.getLanguage(language)) {
          return hljs.highlight(code, { language }).value
        } else {
          return hljs.highlightAuto(code).value
        }
      }
    })
  },
  computed: {
    posts() {
      return [
        {
          id: 1,
          title: 'My first blog post',
          content: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.'
        },
        {
          id: 2,
          title: 'My second blog post',
          content: 'Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.'
        },
        {
          id: 3,
          title: 'My third blog post',
          content: 'At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores.'
        }
      ]
    }
  }
}
</script>

在Post.vue中，我们使用了marked和highlight.js来渲染markdown格式的博客文章内容。

最后，在App.vue中引入我们的路由和设置一个router-view用于渲染页面内容：

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

<script>
import router from './router'

export default {
  name: 'App',
  router
}
</script>

现在，我们可以运行以下命令启动开发服务器：

npm run serve

然后就可以在浏览器中访问http://localhost:8080来查看我们的博客网站了。