Nuxt.js 博客系统-JavaScript中文网-JavaScript教程资源分享门户

项目初始化与配置

在开始构建博客系统之前，我们首先需要初始化一个Nuxt.js项目。使用create-nuxt-app命令来创建一个新的Nuxt.js项目。

npx create-nuxt-app blog-system

在这个过程中，你需要选择一些选项，如项目名称、语言环境、CSS预处理器等。根据你的需求进行选择，这里我们选择以下选项：

Project name: blog-system
Programming language: JavaScript
Package manager: npm
UI framework: Tailwind CSS
Nuxt.js modules: @nuxtjs/axios
Linting tools: ESLint
Testing framework: Jest
Rendering mode: Universal (SSR / SSG)
Deployment target: Server (Node.js hosting)
Development tools: jsconfig.json

完成以上步骤后，进入项目目录并启动开发服务器：

cd blog-system
npm run dev

此时，你应该能够在浏览器中看到默认的Nuxt.js欢迎页面。

创建博客文章页面

为了实现博客系统，我们需要创建几个页面来展示文章列表和单篇文章内容。首先，创建一个名为articles.vue的新页面文件，位于pages目录下。

文章列表页

在articles.vue文件中，我们可以通过循环渲染从API获取的文章数据，并展示它们。

// www.javascriptcn.com code example
<template>
  <div>
    <h1>博客文章列表</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>
export default {
  async asyncData({ $axios }) {
    const articles = await $axios.$get('/api/articles')
    return { articles }
  },
}
</script>

单篇文章页

接下来，创建一个名为article.vue的新页面文件，用于显示特定文章的内容。

// www.javascriptcn.com code example
<template>
  <div>
    <h1>{{ article.title }}</h1>
    <p>{{ article.content }}</p>
  </div>
</template>

<script>
export default {
  async asyncData({ $axios, params }) {
    const article = await $axios.$get(`/api/articles/${params.id}`)
    return { article }
  },
}
</script>

创建博客文章API接口

为了使上述页面能够正常工作，我们需要设置API接口来处理数据。这可以通过在server/api目录下创建新的API文件来实现。

获取所有文章

创建一个名为articles.js的新文件，用于提供所有文章的数据。

// www.javascriptcn.com code example
export default function (req, res) {
  const articles = [
    {
      id: 1,
      title: "第一篇文章",
      content: "这是第一篇博客文章的内容。",
    },
    // 添加更多文章...
  ]
  res.status(200).json(articles)
}

获取单个文章

创建一个名为article.js的新文件，用于提供特定文章的数据。

// www.javascriptcn.com code example
export default function (req, res) {
  const articleId = req.query.id
  const article = {
    id: parseInt(articleId),
    title: `第${articleId}篇文章`,
    content: `这是第${articleId}篇博客文章的内容。`,
  }
  res.status(200).json(article)
}

配置路由

为了让我们的应用能够正确地导航到不同的页面，需要在nuxt.config.js中配置路由。

// www.javascriptcn.com code example
export default {
  router: {
    extendRoutes(routes, resolve) {
      routes.push({
        name: 'article',
        path: '/articles/:id',
        component: resolve(__dirname, 'pages/article.vue'),
      })
    },
  },
}

添加样式

为了给我们的博客系统添加一些视觉上的吸引力，我们可以使用Tailwind CSS。在nuxt.config.js中启用Tailwind模块。

modules: [
  '@nuxtjs/tailwindcss',
],

然后在全局样式文件assets/css/main.css中引入Tailwind样式：

@tailwind base;
@tailwind components;
@tailwind utilities;

最后，在nuxt.config.js中将这个样式文件链接到应用：

css: ['~/assets/css/main.css'],

结语

至此，我们已经完成了基本的博客系统的搭建。接下来可以进一步优化UI设计、增加用户认证功能、评论系统等，以完善整个博客平台。希望这篇教程对你有所帮助！