Vue3+TypeScript 项目构建：后半篇，展现精彩！

大家好，我是技术博客的撰稿人，今天我们将继续探索 Vue3 + TypeScript 项目搭建和封装的旅程，一起步入精彩的后半篇。让我们从 request.ts 开始吧！

1. request.ts 封装网络请求

request.ts 的目标是将我们项目中所有的网络请求都进行封装，方便后期调用。这里，我推荐使用 Axios 这个轻量级的 HTTP 客户端库，它可以帮助我们简化网络请求的编写。

首先，在 request.ts 文件中，我们引入 Axios 库：

import axios from 'axios'

接着，我们定义一个 createRequest 函数来创建 Axios 实例，并将其导出供其他模块使用：

export function createRequest(config) {
  // 创建 Axios 实例
  const service = axios.create(config)
  // 请求拦截器
  service.interceptors.request.use(
    (config) => {
      // 在发送请求之前做些什么
      return config
    },
    (error) => {
      // 请求错误时做些什么
      return Promise.reject(error)
    }
  )
  // 响应拦截器
  service.interceptors.response.use(
    (response) => {
      // 在收到响应时做些什么
      return response
    },
    (error) => {
      // 响应错误时做些什么
      return Promise.reject(error)
    }
  )
  // 返回 Axios 实例
  return service
}

然后，我们在 main.ts 中引入 createRequest 函数，并将其分配给一个名为 request 的变量：

import { createRequest } from './request'
export const request = createRequest()

这样，我们就可以在其他模块中直接使用 request 变量来发送网络请求了。

2. storage.ts 封装本地存储

storage.ts 的目的是封装本地存储的操作，以便我们可以更方便地存储和读取数据。

首先，在 storage.ts 文件中，我们定义一个 setItem 函数和一个 getItem 函数来分别设置和获取本地存储中的数据：

export function setItem(key, value) {
  localStorage.setItem(key, JSON.stringify(value))
}

export function getItem(key) {
  const value = localStorage.getItem(key)
  if (value) {
    return JSON.parse(value)
  }
  return null
}

然后，我们在 main.ts 中引入 setItem 和 getItem 函数，并将其分配给相应的变量：

import { setItem, getItem } from './storage'
export const setStorageItem = setItem
export const getStorageItem = getItem

这样，我们就可以在其他模块中直接使用 setStorageItem 和 getStorageItem 变量来操作本地存储了。

3. config.ts 配置文件

config.ts 文件的作用是存储一些全局的配置信息，比如项目的基本信息、API 接口的地址、前端路由等等。

首先，在 config.ts 文件中，我们定义了一些配置项：

export const projectName = 'Vue3 + TypeScript 项目'
export const apiBaseUrl = 'http://localhost:3000/api'
export const routerConfig = [
  { path: '/', component: Home },
  { path: '/about', component: About },
]

然后，我们在 main.ts 中引入 config.ts 文件，并将这些配置项分配给相应的变量：

import { projectName, apiBaseUrl, routerConfig } from './config'
export const APP_NAME = projectName
export const API_BASE_URL = apiBaseUrl
export const ROUTER_CONFIG = routerConfig

这样，我们就可以在其他模块中直接使用这些配置项了。

4. API 接口封装

我们已经封装好了 request.ts 和 config.ts，接下来就可以封装 API 接口了。

首先，在 api 文件夹中，我们创建一个 index.ts 文件，并在其中定义一个 createAPI 函数来创建 API 实例：

import { request, API_BASE_URL } from '@/config'

export function createAPI(config) {
  // 创建 API 实例
  const service = request.create(config)
  // 设置 API 的基准 URL
  service.defaults.baseURL = API_BASE_URL
  // 返回 API 实例
  return service
}

然后，我们在每个 API 接口文件中，都引入 createAPI 函数，并将其分配给一个名为 api 的变量：

import { createAPI } from '../api'
export const api = createAPI()

这样，我们就可以在其他模块中直接使用 api 变量来调用 API 接口了。

总结

经过一系列的操作，我们已经完成了 Vue3 + TypeScript 项目的搭建和封装，包括 request.ts、storage.ts、config.ts 的配置，以及 API 接口的封装。现在，我们已经可以放心地在这个项目中进行开发了。

希望这篇文章对您有所帮助，也欢迎您在评论区留下您的看法和建议。我是技术博客的撰稿人，我们下期再见！