【前端工程化】如何制定前端项目中的页面模版？

在企业级后台系统中，页面是用户与系统交互的核心单元。为了保证开发效率、维护成本和一致性体验，我们需要围绕常见的业务场景制定统一的页面结构规范。

本文主要涵盖页面设计原则、标准结构示例、典型页面类型、开发最佳实践等内容，适用于 Vue 或 React 技术栈下的中大型后台管理系统项目。

一、页面设计原则

结构统一

所有页面遵循统一的目录结构；
包含 template、script、style 三大部分；
页面组件命名采用 PascalCase（如 UserList.vue）；

布局标准化

使用统一的布局组件（如 <Layout>, <Header>, <Sider>, <Content>）；
支持响应式布局，适配不同分辨率；
提供默认空白页、带侧边栏页、全屏页等基础模板；

权限控制

页面路由配置清晰，路径命名统一（如 /user/list, /order/detail）；
动态路由支持权限控制；
页面进入前进行权限校验，无权限时跳转至 403 页面；

数据驱动

页面初始化时统一调用数据服务获取数据；
使用 Pinia/Vuex/Zustand 管理页面级状态；
页面卸载时清理副作用（如定时器、事件监听）；

二、标准页面结构示例（以 Vue 为例）

vue 复制代码

<template>
  <layout class="page-user-list">
    <template #header>
      <h2>用户管理</h2>
    </template>

    <template #default>
      <div class="user-filter">
        <search-bar @search="onSearch" />
      </div>
      <data-grid
        :columns="columns"
        :data="users"
        :loading="loading"
        @sort="onSort"
        @filter="onFilter"
      />
      <pagination
        :total="total"
        :current-page="currentPage"
        @change="onChangePage"
      />
    </template>

    <template #footer>
      <page-footer />
    </template>
  </layout>
</template>

<script>
import Layout from '@/components/Layout.vue';
import SearchBar from '@/components/SearchBar.vue';
import DataGrid from '@/components/DataGrid.vue';
import Pagination from '@/components/Pagination.vue';
import PageFooter from '@/components/PageFooter.vue';
import UserService from '@/services/user.service';

export default {
  name: 'UserListPage',
  components: {
    Layout,
    SearchBar,
    DataGrid,
    Pagination,
    PageFooter
  },
  data() {
    return {
      users: [],
      loading: true,
      total: 0,
      currentPage: 1,
      columns: [
        { title: '用户名', field: 'username' },
        { title: '角色', field: 'role' },
        { title: '创建时间', field: 'createdAt' }
      ]
    };
  },
  async mounted() {
    try {
      this.loading = true;
      const res = await UserService.fetchUserList(this.currentPage);
      this.users = res.list;
      this.total = res.total;
    } catch (error) {
      console.error('Failed to load user list:', error);
      this.$router.push('/error/404');
    } finally {
      this.loading = false;
    }
  },
  methods: {
    onSearch(keyword) {
      this.keyword = keyword;
      this.currentPage = 1;
      this.loadUsers();
    },
    onSort(field, order) {
      this.sortField = field;
      this.sortOrder = order;
      this.loadUsers();
    },
    onChangePage(page) {
      this.currentPage = page;
      this.loadUsers();
    },
    async loadUsers() {
      this.loading = true;
      const res = await UserService.fetchUserList({
        page: this.currentPage,
        keyword: this.keyword,
        sort: `${this.sortField}:${this.sortOrder}`
      });
      this.users = res.list;
      this.loading = false;
    }
  }
};
</script>

<style scoped>
.page-user-list .user-filter {
  margin-bottom: 16px;
}
</style>

三、典型页面模板类型

1. 列表页（List Page）

展示一组数据条目（如用户列表、订单列表）；

支持分页、筛选、排序功能；

示例：OrderListPage.vue, ProductListPage.vue

2. 详情页（Detail Page）

显示单个对象的完整信息（如商品详情、用户详情）；

可能包含子导航或标签切换；

示例：ProductDetailPage.vue, UserProfilePage.vue

3. 表单页（Form Page）

提供新增或编辑操作界面；

支持字段校验、提交成功提示；

示例：CreateOrderPage.vue, EditProfilePage.vue

4. 异常页（Error Page）

统一展示错误状态（如 404、500）；

提供返回首页按钮；

示例：NotFoundPage.vue, ServerErrorPage.vue

5. 配置页 / 设置页（Settings Page）

多 Tab 设计，用于调整系统参数或用户设置；

每个 Tab 对应独立组件；

示例：AccountSettingPage.vue, SystemConfigPage.vue

四、页面开发最佳实践

1. 生命周期使用建议

created/mounted：用于请求初始数据；
beforeUnmount：清除定时器、取消订阅、销毁实例；
activated/deactivated（Vue）：用于缓存组件时的数据更新；

2. 路由守卫处理

在 beforeRouteEnter 或 beforeRouteUpdate 中处理权限逻辑；
使用 nextTick() 确保 DOM 更新后再执行某些操作；

3. 数据请求优化

使用 Axios 或 Fetch API 请求数据；
添加全局错误拦截器统一处理异常；
对高频请求添加防抖/节流机制；

4. 页面性能优化

非关键资源延迟加载（如图片懒加载）；
使用 keep-alive 缓存常用页面；
避免在页面中重复引入相同组件或服务；

五、页面组件文档建议

每个页面组件应配有说明文档，内容包括：

功能描述
props 表格（类型、默认值、是否必填）
events 列表
插槽说明
使用示例代码

示例页面文档：UserListPage 用户列表页

Props

参数名	类型	默认值	必填	说明
autoLoad	boolean	true	否	初始化是否自动加载

Events

事件名	参数	说明
select	user	用户点击某一行触发

插槽

插槽名	说明
header	自定义头部区域
actions	自定义操作按钮

示例代码

vue 复制代码

<UserListPage auto-load @select="handleSelect" />

六、脚手架工具推荐

手动复制模板：从已有模板 clone 并修改页面名称、接口、样式；
CLI 工具生成：使用脚手架命令一键生成页面骨架；
bash 复制代码
```
npm run generate page:user-profile
```
低代码平台：使用可视化工具拖拽生成页面并导出标准代码；

七、页面模板管理建议

统一命名规则：如 UserListPage.vue, OrderDetailPage.vue；
集中存放模板：可建立 /templates/pages/ 目录管理通用模板；
版本更新记录：每次模板升级需更新 CHANGELOG；
团队内部共享：通过私有 NPM 包或 Git Submodule 共享模板；