好的，下面是一个简单的
个人博客的
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 cla
ss="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 digni
ssimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores.'
}
]
}
}
}
</script>
```
Post.
vue
```
<template>
<div cla
ss="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 digni
ssimos 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来查看我们的
博客网站了。
849
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
