使用Vue.js部署博客网站

首先，需要安装 Vue CLI，然后使用它来创建一个 Vue 3 项目。在命令行中输入以下命令：

npm install -g @vue/cli
vue create my-blog
cd my-blog
vue add router

接下来，修改 src 目录下的文件以实现博客站点的功能。

在 src 目录下创建一个名为 api 的文件夹，然后在其中创建一个名为 index.js 的文件。在这个文件中，我们将定义一个函数来获取站点信息、文章分类导航和文章列表。

// src/api/index.js
import axios from 'axios';

export async function getSiteInfo() {
  const response = await axios.get('https://api.example.com/site-info');
  return response.data;
}

export async function getCategories() {
  const response = await axios.get('https://api.example.com/categories');
  return response.data;
}

export async function getArticles(categoryId) {
  const response = await axios.get(`https://api.example.com/articles?category=${categoryId}`);
  return response.data;
}

修改 src/App.vue 文件，添加路由和组件。

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

<script>
import Home from './components/Home.vue';
import Category from './components/Category.vue';
import Article from './components/Article.vue';

export default {
  name: 'App',
  components: {
    Home,
    Category,
    Article,
  },
};
</script>

在 src/router 目录下的 index.js 文件中，添加路由配置。

import { createRouter, createWebHistory } from 'vue-router';
import Home from '../views/Home.vue';
import Category from '../views/Category.vue';
import Article from '../views/Article.vue';

const routes = [
  {
    path: '/',
    redirect: '/home',
  },
  {
    path: '/home',
    name: 'Home',
    component: Home,
  },
  {
    path: '/category/:id',
    name: 'Category',
    component: Category,
  },
  {
    path: '/article/:id',
    name: 'Article',
    component: Article,
  },
];

const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes,
});

export default router;

创建 src/components 目录下的 Home.vue、Category.vue 和 Article.vue 文件，分别用于显示首页、文章分类页面和文章详情页面。在这些文件中，我们需要调用上面定义的 API 函数来获取数据，并将数据绑定到模板中。

Home.vue:

<template>
  <div>
    <h1>{{ siteInfo.title }}</h1>
    <ul>
      <li v-for="category in categories" :key="category.id">
        <router-link :to="{ name: 'Category', params: { id: category.id } }">{{ category.name }}</router-link>
      </li>
    </ul>
    <ul>
      <li v-for="article in articles" :key="article.id">
        <router-link :to="{ name: 'Article', params: { id: article.id } }">{{ article.title }}</router-link>
      </li>
    </ul>
  </div>
</template>

<script>
import { getSiteInfo, getCategories, getArticles } from '../api';

export default {
  data() {
    return {
      siteInfo: {},
      categories: [],
      articles: [],
    };
  },
  async created() {
    this.siteInfo = await getSiteInfo();
    this.categories = await getCategories();
    this.articles = await getArticles();
  },
};
</script>

Category.vue:

<template>
  <div>
    <h1>{{ category.name }}</h1>
    <ul>
      <li v-for="article in articles" :key="article.id">
        <router-link :to="{ name: 'Article', params: { id: article.id } }">{{ article.title }}</router-link>
      </li>
    </ul>
  </div>
</template>

<script>
import { getArticles } from '../api';

export default {
  data() {
    return {
      category: {},
      articles: [],
    };
  },
  async created() {
    this.category = this.$route.params;
    this.articles = await getArticles(this.category.id);
  },
};
</script>

Article.vue:

<template>
  <div>
    <h1>{{ article.title }}</h1>
    <p>{{ article.content }}</p>
  </div>
</template>

<script>
import { getArticle } from '../api';

export default {
  data() {
    return {
      article: {},
    };
  },
  async created() {
    this.article = await getArticle(this.$route.params.id);
  },
};
</script>

现在，运行 npm run serve 来启动你的博客站点。请注意，你需要将上述代码中的 API URL 替换为实际的第三方 API URL。

使用Vue.js部署博客网站

Mr. Du