Vue 3 + Vite：前端项目快速搭建与API集成实战

摘要

在前端开发的世界中，效率和体验同等重要，Vue 3 结合 Vite 的开发模式，为开发者提供了一个快速、轻量且功能丰富的开发环境。本文将带你从零开始，一步步搭建一个Vue 3前端项目，并实现与后端API的集成，展示如何展示一个动态的书籍列表。

1. 环境准备与项目初始化

在开始之前，请确保你的开发环境中已安装Node.js。接着，使用Vite初始化一个新的Vue 3项目：

npm init vite@latest

在交互式命令行中填写项目名称，并选择Vue作为框架

2. 项目依赖安装

进入项目目录，安装项目所需的依赖：

cd your-vue-project
npm install

3. 项目本地运行与访问

运行开发服务器，Vite 将为你的项目提供快速的本地开发体验：

npm run dev

访问 http://localhost:5173 查看你的项目

4. 后端API接口调用实现

在 src/api.js 中配置axios以实现API调用：

import axios from 'axios';

const service = axios.create({
  baseURL: 'http://localhost:8000/', // 你的后端服务地址
  timeout: 5000
});

expo