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
});

export default service;

5. 前端数据显示与错误处理

在 src/App.vue 中，使用Vue的Composition API来获取并显示数据：

<template>
  <div>
    <ul>
      <li v-for="book in books" :key="book.title">
        {{ book.title }} - {{ book.price }}
      </li>
    </ul>
    <div v-if="error">{{ error }}</div>
  </div>
</template>

<script>
import { ref } from 'vue';
import api from '@/api';

export default {
  setup() {
    const books = ref([]);
    const error = ref(null);

    const fetchBooks = async () => {
      try {
        const response = await api.get('/book');
        books.value = response.data;
      } catch (err) {
        error.value = err.message || 'Failed to fetch books';
      }
    };

    fetchBooks();

    return { books, error };
  }
};
</script>

6. 完整项目的本地测试

确保你的后端服务正在运行，然后再次执行 npm run dev 启动Vue项目，后端API搭建：

深入理解Django REST framework (DRF)：从安装到API测试https://blog.csdn.net/qq_64469885/article/details/140586860?spm=1001.2014.3001.5502在浏览器中检查书籍列表是否正确显示，以及错误处理是否正常工作

7. 结语

通过本文，你已经学会了如何使用Vue 3和Vite快速搭建前端项目，并集成后端API。这只是一个开始，Vue和Vite的强大功能等待着你去探索。