释放创造力：打造一个属于自己的掘金式社区

2024-01-02 23:41:48

踏入数字世界的无限可能，让我们开始一场激动人心的旅程，将你的创造力释放到一个崭新的领域。在这个全面的技术指南中，我们将携手使用 Vue3 和 Vant3 的强大功能，打造一个专属于你的掘金式社区类 web 应用程序。从建立项目到实现动态内容推荐，我们将深入探讨每个步骤，赋予你前端开发技能的全新维度。

建立项目

首先，让我们建立我们的 Vue3 项目。使用 Vue CLI，一个方便的命令行界面，运行以下命令：

vue create my-community-app

这将创建一个新的 Vue3 项目，你可以使用它来构建你的社区应用程序。

引入 Vant3

Vant3 是一个移动端 UI 组件库，它将为我们的应用程序提供精美而实用的界面元素。要引入 Vant3，请运行以下命令：

npm install vant

然后，在你的 main.js 文件中，注册 Vant3：

import Vant from 'vant';
import 'vant/lib/index.css';
Vue.use(Vant);

创建推荐列表和热榜

现在，让我们创建推荐列表和热榜功能。在你的 src 目录下创建一个 components 目录，并添加以下两个文件：

RecommendList.vue：这个组件将负责显示推荐的文章。
HotList.vue：这个组件将负责显示热门的文章。

在 RecommendList.vue 中，添加以下代码：

<template>
  <van-list>
    <van-cell v-for="item in articles" :key="item.id" :title="item.title" :thumb="item.cover" />
  </van-list>
</template>

<script>
export default {
  props: ['articles'],
};
</script>

在 HotList.vue 中，添加以下代码：

<template>
  <van-list>
    <van-cell v-for="item in articles" :key="item.id" :title="item.title" :thumb="item.cover" />
  </van-list>
</template>

<script>
export default {
  props: ['articles'],
};
</script>

实现数据获取

为了使推荐列表和热榜正常工作，我们需要实现数据获取逻辑。在你的 src 目录下创建一个 api 目录，并添加一个 index.js 文件。

在 api/index.js 中，添加以下代码：

import axios from 'axios';

const api = axios.create({
  baseURL: 'https://example.com/api',
});

export const getArticles = () => {
  return api.get('/articles');
};

在页面中使用组件

现在，我们可以将推荐列表和热榜组件添加到我们的页面中。在你的 src/App.vue 文件中，添加以下代码：

<template>
  <van-tabs>
    <van-tab-item title="推荐">
      <recommend-list :articles="articles" />
    </van-tab-item>
    <van-tab-item title="热榜">
      <hot-list :articles="articles" />
    </van-tab-item>
  </van-tabs>
</template>

<script>
import { ref, onMounted } from 'vue';
import { getArticles } from '@/api';
import RecommendList from '@/components/RecommendList.vue';
import HotList from '@/components/HotList.vue';

export default {
  components: { RecommendList, HotList },
  setup() {
    const articles = ref([]);

    onMounted(() => {
      getArticles().then(res => {
        articles.value = res.data.data;
      });
    });

    return {
      articles,
    };
  },
};
</script>