一个初学者的Nuxt开发过程：V2ex实战案例详解

2024-02-24 10:11:39

Nuxt 是一个基于 Vue.js 的渐进式框架，它可以帮助你轻松构建现代化的单页面应用程序和静态网站。在本文中，我们将使用 Nuxt 开发和部署一个 V2ex 论坛。

前提条件

在开始之前，你需要确保已经安装了以下软件：

Node.js v8.9.0 或更高版本
Yarn v1.9.2 或更高版本
Vue CLI v3.0.0 或更高版本

项目初始化

首先，让我们创建一个新的 Nuxt 项目：

yarn create nuxt-app my-v2ex

这将创建一个名为 my-v2ex 的新目录，其中包含一个基本的 Nuxt 项目结构。

安装依赖项

接下来，我们需要安装一些必要的依赖项：

yarn add axios vue-router vuex

axios 是一个用于发送 HTTP 请求的库。
vue-router 是一个用于管理单页面应用程序路由的库。
vuex 是一个用于管理应用程序状态的库。

配置 Nuxt

接下来，我们需要配置 Nuxt。在 nuxt.config.js 文件中，添加以下内容：

export default {
  // ...
  router: {
    base: '/v2ex/'
  },
  axios: {
    baseURL: 'https://api.v2ex.com/'
  },
  // ...
}

router.base 属性指定了项目的基路径，在我们的例子中，是 /v2ex/。
axios.baseURL 属性指定了 Axios 请求的基础 URL，在我们的例子中，是 https://api.v2ex.com/。

开发

现在，我们可以开始开发我们的 V2ex 论坛了。在 pages 目录中，创建一个名为 index.vue 的文件，并添加以下内容：

<template>
  <div>
    <h1>V2EX</h1>
    <ul>
      <li v-for="topic in topics" :key="topic.id">
        <a :href="'/topic/' + topic.id">{{ topic.title }}</a>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      topics: []
    }
  },
  async mounted() {
    const response = await this.$axios.$get('/topics/latest.json')
    this.topics = response.data
  }
}
</script>