若依框架开发规范详解

在使用若依框架进行开发时，为了保证项目的可维护性和一致性，遵循一定的开发规范是非常重要的。本文将详细介绍若依框架中新增 view、api、组件、样式 等内容的开发规范，并提供具体的实现示例和注意事项。

一、View 的新增规范

在项目开发过程中，每个路由通常对应一个 View 文件。如果一个模块包含多个功能页面或组件，建议将这些功能模块的文件放在一个独立的文件夹中进行维护。

1. 创建 View 文件夹

在 @/views 目录下，创建对应的模块文件夹。假设我们在 system 模块下新增一个 user 管理页面：

@/views/system/user/index.vue

2. 模块功能的组织

如果模块包含多个功能页面或组件，建议在模块文件夹下再创建一个子文件夹，将相关的组件或工具函数放在该文件夹中：

@/views/system/user/components/UserTable.vue
@/views/system/user/components/UserForm.vue

这样做可以将模块内的代码进行合理分层和组织，减少维护成本。

二、API 的新增规范

在 @/api 文件夹下为每个模块创建对应的 API 服务文件，统一管理与后端的交互逻辑。

1. 创建 API 服务文件

假设我们在 system 模块中新增 user 相关的 API 服务，可以在 @/api/system 目录下创建 user.js 文件：

@/api/system/user.js

2. 定义 API 方法

在 user.js 文件中，定义与后端交互的具体方法，例如获取用户列表、新增用户、更新用户等操作：

import request from '@/utils/request'

// 获取用户列表
export function listUser(query) {
  return request({
    url: '/system/user/list',
    method: 'get',
    params: query
  })
}

// 新增用户
export function addUser(data) {
  return request({
    url: '/system/user',
    method: 'post',
    data: data
  })
}

// 更新用户
export function updateUser(data) {
  return request({
    url: '/system/user',
    method: 'put',
    data: data
  })
}

// 删除用户
export function deleteUser(userId) {
  return request({
    url: `/system/user/${userId}`,
    method: 'delete'
  })
}

这样，每个模块的 API 都能集中管理，便于后期维护和修改。

三、组件的新增规范

若依框架中，组件分为全局组件和模块特定组件。全局组件应放在 @/components 目录下，而模块特定组件应放在对应的 views 目录下。

1. 全局组件

全局组件通常是一些可以被多个模块或页面复用的通用组件，如富文本编辑器、搜索组件、分页组件等。它们应该放在 @/components 目录下：

@/components/RichTextEditor.vue
@/components/SearchForm.vue
@/components/Pagination.vue

2. 模块特定组件

模块特定的组件应该放在当前模块的 views 目录下。例如，system 模块中的 user 页面有一个特定的用户表单组件 UserForm.vue，则应将其放在 @/views/system/user/components/ 目录下：

@/views/system/user/components/UserForm.vue

四、样式的新增规范

样式的管理与组件类似，分为全局样式和模块特定样式。全局样式应放在 @/style 目录下，而模块特定样式应放在对应的 views 目录下。

1. 全局样式

全局样式通常是项目中多个页面共享的样式，如按钮样式、表单样式、布局样式等。它们应放在 @/style 目录下，并在项目入口文件中引入：

@/style/global.scss
@/style/layout.scss
@/style/button.scss

2. 模块特定样式

模块特定的样式应该放在当前模块的 views 目录下，并使用 scoped 属性确保样式只作用于当前组件，避免全局污染。例如：

<template>
  <div class="user-form">
    <!-- 用户表单内容 -->
  </div>
</template>

<script>
export default {
  name: 'UserForm'
}
</script>

<style scoped>
.user-form {
  margin: 20px;
  padding: 10px;
  background-color: #f5f5f5;
}
</style>

这样做可以确保样式只作用在当前组件内，避免造成全局的样式污染。

五、总结

通过遵循以上规范，可以有效提高项目的可维护性、可扩展性和代码的一致性。每个模块的代码都能按照统一的规范进行组织，便于开发者快速定位问题和进行功能扩展。