前端实战项目详解：Vite 2、Vue 3、TypeScript、Axios、Vant 齐上阵

前端

2024-01-30 10:39:01

写在前面

在上一篇文章中，我们详细介绍了如何从零搭建一个基于 Vite 2、Vue 3、TypeScript、Axios 和 Vant 的移动端框架项目。

本篇作为系列文章的第二部分，我们将继续深入探讨这个项目的实战应用，带你领略这些前端技术强强联合的魅力。

1. 项目结构梳理

首先，让我们回顾一下项目的整体结构：

src 目录：存放所有源代码
components 目录：放置自定义组件
pages 目录：定义页面视图
store 目录：管理状态数据
utils 目录：包含通用工具函数

2. 数据交互：Axios 登场

Axios 是一个用于发送 HTTP 请求的 Promise 驱动的客户端库。它提供了一个简单易用的 API，可以轻松地执行 GET、POST、PUT 和 DELETE 等操作。

在我们的项目中，我们使用 Axios 来处理与后端的交互。例如，在 store/index.js 中，我们定义了一个 fetchProducts 函数：

import axios from 'axios'

const fetchProducts = async () => {
  const { data } = await axios.get('/api/products')
  return data
}

这个函数使用 Axios 发起一个 GET 请求来获取产品数据，并将其返回。

3. 组件库：Vant 助力

Vant 是一个高质量的移动端组件库，提供了丰富的 UI 组件，可以快速提升开发效率。

在我们的项目中，我们广泛使用了 Vant 组件，例如按钮、输入框、列表和弹出层。通过引入 Vant，我们可以轻松构建出美观实用的移动端界面。

例如，在 pages/Home.vue 中，我们使用 Vant 的 Button 组件创建了一个按钮：

<template>
  <Button type="primary" size="large">点击</Button>
</template>

<script>
import { Button } from 'vant'

export default {
  components: { Button },
}
</script>

4. 状态管理：Vuex 掌舵

Vuex 是一个集中式的状态管理库，用于管理应用中的共享状态。在我们的项目中，我们使用 Vuex 来管理用户数据、购物车数据等共享状态。

例如，在 store/modules/user.js 中，我们定义了一个用户模块：

const state = {
  userInfo: null,
}

const mutations = {
  setUserInfo(state, userInfo) {
    state.userInfo = userInfo
  },
}

这个模块包含了 userInfo 状态和一个 setUserInfo 突变，用于更新用户数据。

5. TypeScript 类型检查：严谨保障

TypeScript 是一种强大的静态类型语言，可以为 JavaScript 代码提供类型检查。在我们的项目中，我们使用 TypeScript 来定义组件的属性类型、函数的返回类型等，以提高代码的可读性和可维护性。

例如，在 components/Product.vue 中，我们使用 TypeScript 定义了一个 Product 组件：

<template>
  <div>
    <p>{{ product.name }}</p>
    <p>{{ product.price }}</p>
  </div>
</template>

<script lang="ts">
import { defineComponent, PropType } from 'vue'

export default defineComponent({
  props: {
    product: {
      type: Object as PropType<Product>,
      required: true,
    },
  },
})
</script>