hub-baai-lib
v2.1.6
Published
社区公用插件
Downloads
14
Readme
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:评论列表二级展开收起切换,敏感内容展示隐藏切换