hs-uii/README.md

hs-uii

<div align="center">
  <h1 style="border-bottom:0">
    <p>hs-ui组件库</p>
    <p style="font-size:20px">一套适合开发者使用的轻量级UI组件库，完美支持vue3</p>
  </h1>
</div>
<br/>



官网主页: [hs-ui使用文档](https://mzlui.codeym.com/)
***
### 快速使用
```
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提交流程示例：

  ```javascript
  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_ 文件名，例如：
  ```javascript
  //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
  ```

  #### 项目启动

  ```javascript
  npm run dev
  ```

  #### 项目打包

  ```javascript
  npm run build
  ```

### 组件开发规范

-  通过在 *packages* 目录下创建组件目录结构，包含测试代码、入口文件、文档。
-  组件入口文件必须以 *index.js* 命名，并包含 *install* 方法,参考代码：
  ```javascript
  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*。