item-bank-custom

pc端题库SDK

Usage no npm install needed!

<script type="module">
  import itemBankCustom from 'https://cdn.skypack.dev/item-bank-custom';
</script>

README

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 lib //打包库
 npm login  //登录npm账号
 npm publish //发布npm包

文档指路

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

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

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