掘金杀手锏：基于Vue3+Vant3打造网页版掘金APP——个人主页篇

2023-11-06 19:39:32

在技术蓬勃发展的时代，Web应用程序已成为我们日常生活中不可或缺的一部分。它们方便、高效，并且可以在任何设备上访问。随着越来越多的企业和个人转向网络，对定制且用户友好的Web应用程序的需求也日益增长。在这场技术竞赛中，基于Vue3和Vant3框架的网页版类掘金APP异军突起，以其卓越的功能和令人惊叹的用户体验脱颖而出。

在本文中，我们将深入探讨如何使用Vue3和Vant3打造一个网页版类掘金APP，重点关注创建个人主页页面。我们将按部就班地指导您完成整个过程，从头开始创建项目，到添加交互式组件和实现数据绑定。

技术栈简介

Vue3：一个渐进式JavaScript框架，用于构建用户界面。
Vant3：一个移动端组件库，提供了一系列预先构建的组件。

准备工作

在开始之前，您需要确保系统已安装以下软件：

Node.js
Vue CLI
IDE（如Visual Studio Code）

创建项目

使用Vue CLI创建项目：

vue create my-掘金-app

导航到新创建的项目目录：

cd my-掘金-app

安装Vant3：

npm install vant -S

布局结构

首先，我们需要定义应用程序的布局结构。在src/App.vue文件中，添加以下代码：

<template>
  <div id="app">
    <van-nav-bar title="个人主页" left-arrow @click="goBack" />
    <van-row :gutter="20">
      <van-col span="12">
        <van-avatar size="120" :src="avatarUrl" />
      </van-col>
      <van-col span="12">
        <div class="info">
          <h1>{{ username }}</h1>
          <p>{{ bio }}</p>
          <van-button type="primary" @click="follow">关注</van-button>
        </div>
      </van-col>
    </van-row>
    <van-tabs v-model="activeTab" @on-change="changeTab">
      <van-tab title="文章">
        <div class="articles">
          <van-list v-for="article in articles" :key="article.id">
            <van-cell :title="article.title" :value="article.content" />
          </van-list>
        </div>
      </van-tab>
      <van-tab title="动态">
        <div class="activities">
          <van-list v-for="activity in activities" :key="activity.id">
            <van-cell :title="activity.title" :value="activity.content" />
          </van-list>
        </div>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>
import { ref } from 'vue';
import { NavBar, Row, Col, Avatar, Button, Tabs, Tab, List, Cell } from 'vant';

export default {
  components: {
    NavBar,
    Row,
    Col,
    Avatar,
    Button,
    Tabs,
    Tab,
    List,
    Cell
  },
  setup() {
    const avatarUrl = 'https://avatars.githubusercontent.com/u/105882565?v=4';
    const username = '掘金掘友';
    const bio = '这是一个掘友的个人主页';
    const activeTab = ref('文章');
    const articles = [
      { id: 1, title: '技术分享', content: '这是一篇技术分享文章' },
      { id: 2, title: '掘金使用指南', content: '这是一篇掘金使用指南文章' }
    ];
    const activities = [
      { id: 1, title: '掘金活动', content: '这是一个掘金活动' },
      { id: 2, title: '掘金打卡', content: '这是一个掘金打卡活动' }
    ];

    const goBack = () => {
      window.history.back();
    };

    const follow = () => {
      console.log('关注成功');
    };

    const changeTab = (tab) => {
      activeTab.value = tab.name;
    };

    return {
      avatarUrl,
      username,
      bio,
      activeTab,
      articles,
      activities,
      goBack,
      follow,
      changeTab
    };
  }
};
</script>

<style>
#app {
  font-family: 'Helvetica', 'Arial', sans-serif;
}

.info {
  margin-top: 20px;
}

h1 {
  font-size: 24px;
  margin-bottom: 10px;
}

p {
  font-size: 16px;
  margin-bottom: 20px;
}

.articles, .activities {
  margin-top: 20px;
}

.van-list {
  border-bottom: 1px solid #ccc;
}
</style>