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: 单题预览
}
}
}国际化
-
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就可以自定义主题色。
如何避免样式污染
- 由于我们插件使用了第三方UI框架 ant-design-vue 所以或存在部分样式污染。可以适用于以下方法避免样式污染。
- 第一步:在引入less文件时，使用加上ibs-vue嵌套，如：
.ibs-vue{ @import/xxxx.less};
注意：类名必须是ibs-vue
- 第二步，在你需要用到我们组件的地方外层套上div并加上第一步设置的类名。如：
<div class="ibs-vue">
<item-manage></item-manage>
</div>
npm包发布步骤
- 修改版本号
- 执行如下命令
npm run lib //打包库
npm login //登录npm账号
npm publish //发布npm包