好的，下面是一个简单的个人博客的
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 hl
js 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 && hl
js.getLanguage(language)) {
return hl
js.highlight(code, { language })
.value
} else {
return hl
js.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来查看我们的博客网站了。
客户端dolores环境搭建报错解决办法
博客主要讲述客户端dolores环境搭建时出现OptionType报错的解决办法。需按路径找到Select.tsx文件，在OptionType后面加,any，文件中共有9处，加上7处即可。
扫一扫
1287
到【灌水乐园】发言
