VUE项目中的组件化开发思路

组件化开发是核心思想

思路：

1. 目录结构清晰

   • src/components 全局通用组件
   • src/views 页面组件
   • 每个组件文件夹单独管理

2. 组件命名规范

   UserCard.vue

   页面组件使用文件夹命名加 index.vue HomePage/index.vue

3. 分离通用和特定组件：

   • 通用组件： button、model 等封装到src/components
   • 特定功能组件：页面 模块内部 views/Home/FeatureList.vue 就近原则

4. 组件复用：

公共逻辑 mixins(vue2)、compositionAPI(vue3)、自定义钩子

创建可配置的基础组件 减少重复开发

组件开发原则：

1. 单一原则：每个组件只负责一个功能，便于测试和维护
2. 父子通信：通信方式清晰
3. 状态管理：
   1. 小型状态 通过组件自身管理
   2. 跨组件共享状态时：vuex、pinia、context、api
4. 样式隔离
   • scoped css、css module 确保样式不冲突
5. 性能优化
   1. 按需加载，动态引入，使用defineAsyncComponent实现懒加载
   2. 合理使用v-once v-memo v-for 的可以提高渲染性能
   3. 可以将组件单独封装成一个项目上传到npm，作为外部组件引入