item-bank v1.0.64

item-bank

edusoho题库sdk的封装。

使用的第三方组件/插件

• 1."ant-design-vue": "^1.5.0",
• 2."es-ckeditor": "4.7.2-patch13"

开发步骤

    yarn install //安装依赖
    npm run serve //跑功能
    npm run lib //打包库
    npm run clean //清除库

项目结构

• 1.examples 是测试目录，写好的组件可以再 examples/main.js中引用，用于测试组件功能。

• 2.src是组件库开发目录，用于组件库开发。

项目目录分析

• build // 相关编译命令配置文件
• build-style // gulp 编译样式文件
• docs // 开发、使用文档介绍
• examples // 测试目录
• node_modules // 依赖
• public // 本地开发 需要的 es-ckeditor资源 和 index.html资源
• src // 组件库开发目录，用于组件库开发。
• lib // 打包输出目录

本地测试数据

将 examples/data.vue 文件 数据内容 拷贝 到 examples/app.vue中，通过修改 scene: "engine" 配置项 展示各个组件。

// examples/data.vue
export default {
  data() {
    return {
      scene: "engine", // engine 答题组件; report: 答题结果组件; review: 批阅组件;assessment-preview: 试卷预览; assessment-result: 教师端查看答题结果组件; import: 二次导入组件; create: 创建题目组件; item-preview: 单题预览
    }
  }
}

国际化

• 1.ant-design-vue国际化处理;

• 2.题库国际化处理，首先在src/locale/lang/zh-CN.js 及 src/locale/lang/en-US.js写上对应的中英文翻译，然后再需要用到的国际化页面中引入src/mixins/locale.js并将其混入mixins: Locale到当前页面中，就可以使用t("xxx")实现国际化。示例：t("itemBank.message")。

主题色更改

• 在examples/assets/styles/index.less下加上 @primary-color: xxxxxxx就可以自定义主题色。

如何避免样式污染

1.使用less文件

• 由于我们插件使用了第三方UI框架 ant-design-vue 所以会存在部分样式污染（主要是body上有一些全局样式）。可以适用于以下方法避免样式污染。
• 第一步:在引入less文件时，使用加上ibs-vue嵌套，如：.ibs-vue{ @import/xxxx.less};

  注意：类名必须是ibs-vue

• 第二步，在你需要用到我们组件的地方外层套上div并加上第一步设置的类名。如：

      <div class="ibs-vue">
          <item-manage></item-manage>
      </div>

  2.使用css文件如何避免样式污染

  • 我们的css文件中已经加了.ibs-vue的前缀，从而进行打包。所以你只要在用到我们组件的地方加上class="ibs-vue"就可以避免样式污染

npm包发布步骤

• 修改版本号
• 执行如下命令

 npm run dist //打包库
 npm login  //登录npm账号
 npm publish //发布npm包

文档指路

项目开发流程、使用流程介绍 详见 docs/doc.md

组件参数配置项 详见 docs/component-use.md

云监考项目组件 文档 详见 docs/inspection-controller.md