vue3项目开发总结

一、项目准备

1、明确项目需求和目标

在开始构建项目之前，首先要明确项目的需求和目标。这包括了解项目的业务背景、功能需求、性能要求等，以便为后续的技术选型和架构设计提供指导。

2、技术选型与框架选择

• 前端框架：选择Vue3作为前端框架，利用其组件化、响应式等特性来提高开发效率和代码质量。

• 构建工具：当前使用的是vue-cli。推荐使用Vite作为构建工具，因为它具有快速的冷启动、实时的热更新和简洁的配置等优点，能够显著提升开发体验。

• 状态管理：对于复杂的应用，可以选择使用Vuex或Pinia进行状态管理，以保持组件之间的数据同步和逻辑清晰。

• 路由管理：使用Vue Router进行路由管理，实现页面的跳转和参数的传递。

• UI组件库：根据项目需求，选择合适的UI组件库，如Element Plus等，以加快界面开发速度。

3、项目创建

使用前端脚手架初始化项目

4、项目结构规划

• 目录结构：合理规划项目的目录结构，按照功能或业务模块进行划分，保持代码的清晰和易于维护。

• 组件设计：遵循组件化的开发思想，将页面拆分为多个可复用的组件，提高代码的重用性和可维护性。

二、编码开发

代码开发中遵循组件化开发思想，在Vue项目中，通过组件封装和自定义hook可以有效地减少代码冗余和提高代码的可复用性。如果代码需要复用，首先考虑组件封装，因为它可以对 html、css 和 javacript 代码进行复用，而 Hook 只是复用 JavaScript 代码。如果将二者结合，能够高效地提高开发效率，以及项目的可维护性，帮助写出优雅的代码。以下是关于这两个方面的详细解释：

1、组件封装

queryPage 模板页面是一个典型的列表查询页面，它结合了表单查询、表格展示以及分页功能。