hs-uii

hs-ui组件库

一套适合开发者使用的轻量级UI组件库，完美支持vue3

官网主页: hs-ui使用文档

---

快速使用

npm install  hs-ui --save
cnpm install  hs-ui --save

引入

import { createApp } from 'vue'
import App from '@/App.vue'
import hsUii from 'hs-uii'
import 'hs-uii/dist/style.css'; 

const app = createApp(App)
app.use(hsUii)
app.mount('#app')

按需引用

import { hButton, hInput } from 'hs-uii'

愉快开始

<h-button>默认按钮</h-buttonn> 
<h-button type="primary">主要按钮</h-button>

Mzl UI 贡献指南

分支规范

• 贡献代码请保持在 dev 分支，禁止操作 main 分支。
• 组件文档暂时需要提供 md 文件，包括（使用方式、演示、配置项、事件 API、插槽说明...）。
• 提交代码前请先 rebase。
• git提交流程示例：

git add .
git commit -m"add component:button"   //示例
git pull --rebase origin dev
git push origin dev

文档集成规范

• 组件目录下新增 doc 文件夹用于文档编写。
• doc 文件夹下提供 doc.md，一个组件最多只允许一个 .md 文件。
• doc 文件同级存放 demo.vue 文件，demo 不限个数。
• 然后在 doc.md 文件顶部使用 setup 语法糖的方式引入 demo 文件，使用组件的形式展示。
• src/router/routerPage/page.js 引入 md 文件作为路由使用即可。
• 菜单管理文件在 /src/const/menuList.js, path 路劲二级路由名保持跟组件文件夹名及路由 path 配置一致。
• Attributes.vue 作为参数组件，具体使用示例请参考 buttom/doc/Attributes.vue。
• Events.vue 作为事件API组件，具体使用示例请参考 input/doc/Events.vue
• 如果有其他的api需要展示，新增相关组件文件并引入，例如：options.vue，具体使用示例请参考 tree/doc/options.vue
• 代码预览文件为 src/components/Preview.vue，同时在 doc.md 文件以组件的形式引入 Preview.vue ，接收两个props，compName 为组件目录名（建议与路由名保持一致），demoName 为要展示的 demo 文件名，例如：

//doc.md
<script setup>
  import demo1 from './demo1.vue'; 
  import demo2 from './demo2.vue'; 
  import preview from '@/components/preview.vue'
  <div class="componetnsBox">
    <demo1/>
  </div>
  <preview compName="button" demoName="demo1"/>
  <div class="componetnsBox">
    <demo2/>
  </div>
  <preview compName="button" demoName="demo2"/>
</script>

组件测试规范

• 任何一个组件应完成测试后提交 PR
• 组件测试脚本存放目录为 tests 目录，提供 .spec.js 为后拽的测试脚本文件
• 测试脚本需包含初始化测试、渲染测试、插槽测试、事件测试、功能测试等基础测试
• 具体示例请参考 /tests/button.spec.js 脚本文件
• 组件测试命令为：

yarn test || npm test

开发环境

yarn config set ignore-engines true

项目启动

npm run dev

项目打包

npm run build

组件开发规范

• 通过在 packages 目录下创建组件目录结构，包含测试代码、入口文件、文档。
• 组件入口文件必须以 index.js 命名，并包含 install 方法,参考代码：

import hButton from "./index.vue";
hButton.install = (app) => {
  app.component(hButton.name, hButton);
};
export default hButton;

• packages 文件夹下 index.js 作为整体入口文件，须包含所有组件，若需要绑定全局变量或提供组件实例调用，参考代码：

  app.config.globalProperties.$message = Message;
  

• 任何组件禁止使用三方依赖库。

• 组件内如果依赖了其他组件，需要在当前组件内引入，参考 select。