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

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

本文主要涵盖页面设计原则、标准结构示例、典型页面类型、开发最佳实践等内容,适用于 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. 路由守卫处理

  • beforeRouteEnterbeforeRouteUpdate 中处理权限逻辑;
  • 使用 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 共享模板;
相关推荐
10年前端老司机11 分钟前
React 受控组件和非受控组件区别和使用场景
前端·javascript·react.js
夏晚星12 分钟前
vue实现微信聊天emoji表情
前端·javascript
停止重构14 分钟前
【方案】前端UI布局的绝技,响应式布局,多端适配
前端·网页布局·响应式布局·grid布局·网页适配多端
極光未晚14 分钟前
TypeScript在前端项目中的那些事儿:不止于类型的守护者
前端·javascript·typescript
ze_juejin15 分钟前
Vue3 + Vite + Ant Design Vue + Axios + Pinia 脚手架搭建
前端·vue.js
lichenyang45317 分钟前
React项目(移动app)
前端
用户618482402195118 分钟前
Vue-library-start,一个基于Vite的vue组件库开发模板
前端
美团技术团队29 分钟前
报名 | 美团技术沙龙第86期:多业务场景下,美团如何做性能优化
前端
Rrvive1 小时前
localhost 和 127.0.0.1 的核心区别
前端
蓝倾1 小时前
如何使用Python通过API接口批量抓取小红书笔记评论?
前端·后端·api