搭建 Vue.js 开发环境

    Vue.js 是一个用于构建用户界面的渐进式 JavaScript 框架。以下是一份简单的 Vue.js 博客示例，以供参考和学习。

## 搭建 Vue.js 开发环境

首先，确保已安装 Node.js 和 npm。然后，在命令行中运行以下命令以全局安装 Vue CLI：

```
npm install -g @vue/cli
```

接下来，创建一个新的 Vue.js 项目：

```
vue create my-blog
```

进入项目文件夹：

```
cd my-blog
```

启动开发服务器：

```
npm run serve
```

现在，您已经成功搭建了 Vue.js 开发环境，并可以开始编写博客了。

## 创建博客组件

在 `src/components` 目录下，创建一个新的 Vue 组件文件，例如 `BlogPost.vue`。在该文件中，编写以下代码：

```html
<template>
  <div class="blog-post">
    <h1>{{ title }}</h1>
    <p>{{ description }}</p>
    <img :src="image" :alt="altText" />
    <div>
      <span>{{ author }}</span>
      <span>{{ publishedAt }}</span>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    title: String,
    description: String,
    image: String,
    altText: String,
    author: String,
    publishedAt: String,
  },
};
</script>

<style scoped>
.blog-post {
  border: 1px solid #ccc;
  padding: 20px;
  margin-bottom: 20px;
}
</style>
```

## 引入博客组件

在 `src/App.vue` 文件中，引入 `BlogPost` 组件，并将其添加到 `<template>` 部分：

```html
<template>
  <div id="app">
    <BlogPost
      :title="post.title"
      :description="post.description"
      :image="post.image"
      :altText="post.altText"
      :author="post.author"
      :publishedAt="post.publishedAt"
    />
  </div>
</template>

<script>
import BlogPost from "./components/BlogPost.vue";

export default {
  components: {
    BlogPost,
  },
  data() {
    return {
      post: {
        title: "我的第一篇博客",
        description: "这是一篇关于 Vue.js 的博客文章。",
        image: "https://via.placeholder.com/800x400",
        altText: "Vue.js 示例图片",
        author: "张三",
        publishedAt: "2022-01-01",
      },
    };
  },
};
</script>
```

## 样式调整

您可以根据需要调整组件的样式。在 `src/assets/styles/main.scss` 文件中，添加以下样式：

```scss
.blog-post {
  border: 1px solid #ccc;
  padding: 20px;
  margin-bottom: 20px;
  img {
    width: 100%;
    height: auto;
  }
}
```

现在，您已经完成了一个简单的 Vue.js 博客示例。您可以继续添加更多博客文章，或者根据需求进行更多功能和样式的扩展。希望这个示例能对您有所帮助！