摘要
在前端开发的世界中,效率和体验同等重要,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的强大功能等待着你去探索。