hub-baai-lib

hub-baai-lib

社区论文评论区封装为插件

目录结构

发布到npm的插件通常遵循一定的项目目录结构，以确保代码的组织和可维护性。以下是一个典型的npm插件项目目录结构示例：

my-npm-plugin/
├── src/
│   ├── index.js        # 插件的主要源代码文件
│   └── ...             # 其他源代码文件和目录
├── lib/                # 编译后的代码，用于发布到npm（如果使用了编译步骤）
├── test/               # 测试代码
│   ├── unit/           # 单元测试
│   └── integration/    # 集成测试
├── examples/           # 插件使用示例
├── docs/               # 文档
├── .gitignore          # Git忽略文件
├── .npmignore          # npm忽略文件（如果有需要忽略的文件或目录）
├── package.json        # npm包描述文件
├── README.md           # 项目README，通常包含安装、使用说明等
├── LICENSE             # 许可证文件
└── ...                 # 其他配置文件，如.babelrc, .eslintrc, etc.

这里是每个部分的详细说明：

• src/: 包含插件的源代码。这是你开发插件时主要工作的地方。
• lib/: 如果你的插件需要编译（例如，使用Babel将ES6代码转换为ES5），编译后的代码通常放在这个目录。这个目录的内容是实际发布到npm的代码。
• test/: 包含所有测试代码，可能会进一步分为unit/（单元测试）和integration/（集成测试）。
• examples/: 包含一些示例项目或代码，展示如何使用这个插件。
• docs/: 包含项目文档，如API参考、开发者指南等。
• .gitignore: 指定Git版本控制要忽略的文件和目录。
• .npmignore: 指定发布到npm时要忽略的文件和目录。如果没有这个文件，.gitignore会被npm用作默认的忽略文件。
• package.json: 描述你的插件和其依赖的文件。这是npm使用的主要配置文件。
• README.md: 项目的README文件，通常在npm的包页面上显示。它应该包含关于插件的描述、安装指南、使用示例和任何其他重要信息。
• LICENSE: 包含项目许可证的文本。这对于开源项目来说是非常重要的。

请注意，这只是一个示例结构，具体的项目结构可能会根据你的具体需求和偏好而有所不同。重要的是保持代码的组织性和清晰的文档，以便其他开发者可以轻松地使用和贡献你的插件。

示例预览

# 安装依赖
npm install
# 启动
npm run dev

npm 打包发布

切换到项目根目录下，执行以下命令

# 打包
npm run package

修改package.json 文件

"version": "1.0.0",
"description": "插件描述",
"main": "dist/hub-baai-lib.umd.min.js", // 指定main属性，作为入口文件,dist目录下的 .umd.min.js文件
"keywords": ["标签1", "标签2"],
"author": "作者",
"license": "ISC",
"private": false,  // 私有属性要改成 false

发布到 npm 库 https://www.npmjs.com/

npm publish

注意⚠️：更新版本发布，记得修改 package.json 中的 version 版本号

其他项目使用

使用方法跟element-ui类似，在main.js中引入，全局注册

import HubBaaiLib from 'hub-baai-lib';
import 'hub-baai-lib/dist/hub-baai-lib.css';
Vue.use(HubBaaiLib);

页面中使用

评论回复列表

<discuss ref="ref_discuss" :id="post_id" :data="discussList"
      avatar_url="https://hub-avatar.baai.ac.cn/sso-user/82882.png" :isLogin="true" @go2Login="go2Login"
      @getPostId="getPostId" @handleSubmit="handleSubmit" />

参数：
    id：主id
    data：评论列表数据
    avatar_url：登录人头像地址
    isLogin：是否登录，登录后才能评论

事件
    go2Login：登录后才能评论，未登录执行登录操作
    getPostId：当id为空时，执行获取id的操作
    handleSubmit：发布评论事件。发布成功后，执行this.$refs.ref_discuss.updateList(res)隐藏回复框，并刷新数据

评论列表

<discuss-list :list="list" v-if="list.length" :replyDisabled="replyDisabled"  :isLogin="isLogin" @toggleAttribute="toggleAttribute"/>
参数：
    list：评论列表数据
    replyDiabled：默认false，true可以禁用回复功能
    isLogin：是否登录，登录后才能评论
事件
    toggleAttribute：评论列表二级展开收起切换，敏感内容展示隐藏切换