Vue2学生报告页面组件

这是一个基于Vue2的单页报告组件，用于展示学生综合素质评价报告单。组件仅包含构建后的文件，可直接用于生产环境。

安装

npm install vue2-student-report-page --save

使用方法

全局注册

import Vue from 'vue'
import StudentReport from 'vue2-student-report-page'

Vue.use(StudentReport)

按需引入

import { PageIndex } from 'vue2-student-report-page'

export default {
  components: {
    PageIndex
  }
}

组件参数说明

PageIndex 组件

| 参数 | 类型 | 默认值 | 说明 | |------|------|--------|------| | page | Object | {} | 页面数据对象 | | scale | Number | 1 | 缩放比例，范围 0.1-1 | | moduleCode | String | '' | 当前模块代码 | | mode | String | 'dim' | 显示模式，可选值：'dim'或'highlight' |

开发与构建指南

环境要求

• Node.js: 16.x LTS版本 (推荐16.20.2)
• npm: 8.x (推荐8.19.4)

项目使用Volta管理Node.js和npm版本，确保开发环境一致性。

# 安装Volta (如果尚未安装)
curl https://get.volta.sh | bash

# 进入项目目录后，Volta将自动使用配置的Node.js和npm版本

# 安装依赖
npm install

# 启动开发服务
npm run serve

开发步骤

从 dab-ui-pc 项目替换当前 pageReport 目录，详细路径如下：

dab-ui-pc/src/views/business/report/mange/edit/components/ColumnPreview/pageReport

构建与发布流程

• 构建

# 构建组件库
npm run build:lib

# 清理不必要的HTML文件
npm run clean:html

# 查看构建文件列表
npm run check:files

# 运行完整的预发布流程
npm run prepublishOnly

• 发布

# 浏览器登录NPM
npm login --auth-type=web

# 更新版本
npm version patch  # 小版本更新 (1.0.0 → 1.0.1)
npm version minor  # 中版本更新 (1.0.0 → 1.1.0)
npm version major  # 大版本更新 (1.0.0 → 2.0.0)

# 发布到npm仓库
npm publish

构建产物说明：

• dist/vue2-student-report-page.umd.min.js: 压缩后的UMD格式文件，用于通过CDN直接引入
• dist/vue2-student-report-page.common.js: CommonJS格式文件，用于Node.js环境
• dist/vue2-student-report-page.umd.js: 未压缩的UMD格式文件，用于调试

数据结构参考

详细的数据结构说明和使用示例请参考 GitLab仓库。

许可证

MIT