npm package: @fubinbin/work-flow-ui
Description: <h1 align="center">Vue3 + TypeScript + Vite3 PC 👋</h1> <p>   <img src="https://img.shields.io/badge/version-0.1.0-blue.svg?cacheSeconds=2592000" />   <a href="https://cn.vuejs.org/">     <img alt="VUE3" src="https://img.shields.io/badge/documentation-yes
Latest version: 0.0.16

<h1 align="center">Vue3 + TypeScript + Vite3 PC 👋</h1>
<p>
  <img src="https://img.shields.io/badge/version-0.1.0-blue.svg?cacheSeconds=2592000" />
  <a href="https://cn.vuejs.org/">
    <img alt="VUE3" src="https://img.shields.io/badge/documentation-yes-brightgreen.svg" target="_blank" />
  </a>
  <a href="https://github.com/luichooy/vue-antd-pro/graphs/commit-activity">
    <img alt="Maintenance" src="https://img.shields.io/badge/Maintained%3F-yes-green.svg" target="_blank" />
  </a>
</p>

## node版本要求
版本：>16.0.0
推荐使用 [nvm](https://github.com/coreybutler/nvm-windows/releases) 来切换node版本
nvm命令如下：
- nvm install node版本号
- nvm use node版本号

## 接口域名

接口配置在[conf.ts](./src/conf.ts)中修改
> https://service.yishifuwu.cn/(无固定由自己项目决定)


## 接口请求使用
- 在 `src\services\` 文件夹下创建跟业务相关的 ***文件夹/， 文件夹下需要创建俩个文件，index.ts  type.d.ts
- index.ts 用于定义接口名称
- type.d.ts 用于定义 传参类型和接口返回值类型


## 代理说明
- [vite.config](./vite.config.ts)文件中 修改proxy.target域名为所需代理的域名
- 在[conf.ts](./src/conf.ts)中修改对应代理的域名为'api'

## 安装依赖

yarn

## 运行

运行前端本地服务
yarn dev
打开 http://localhost:9530 端口在[vite.config](./vite.config.ts)中可修改 现指定9530

## 打包

yarn build

## 全局注册使用
```js
import { createApp } from "vue";
import App from "./App.vue";
import TWorkFlowUi from '@fubinbin/work-flow-ui'
import '@fubinbin/work-flow-ui/lib/style.css'
const app = createApp(App)
app.use(TWorkFlowUi)
app.mount('#app')
```

## 按需引入

```js
// 在main.js中按下引入
import '@fubinbin/work-flow-ui/lib/style.css'
// 单个.vue文件引入
<script setup lang="ts">
  import {TWorkflowEdit, TTaskList} from "@fubinbin/work-flow-ui"
</script>
```

```html
<head>
  <!-- Import style -->
  <link rel="stylesheet" href="https://unpkg.com/@fubinbin/work-flow-ui/lib/style.css" />
  <!-- Import Vue 3 -->
  <script src="https://unpkg.com/vue@3"></script>
  <!-- 3. 引入t-ui-plus的组件库 -->
  <script src="https://unpkg.com/@fubinbin/work-flow-ui@latest"></script>
</head>
<body>
  <div id="app">
    <t-task-list></t-task-list>
  </div>
  <script>
    const app = Vue.createApp({
      data() {
        return {
          value: ''
        }
      }
    });
    app.mount('#app');
  </script>
</body>
```

## 全部组件如下
| 组件名称                 | 说明                                                                                                                                                       |
| :----------------------- | :--------------------------------------------------------------------------------------------------------------------------------------------------------- |
| TWorkflowEdit              | 流程编辑页面                                                                                                                                                   |
| TTaskList          | 流程列表页面                                                                                                                                                                                 |
## work-flow-ui Volar 组件类型提示

```js
// 需要在使用的项目的tsconfig.json文件中添加以下
compilerOptions：{
  "types": [
      "@fubinbin/work-flow-ui/components.d.ts",
    ],
}
```

## 目录结构

```bash
├── /dist/                 # 项目输出目录
├── /node_modules/         # 模块安装目录
├── /public/               # 公共文件
│ ├── favicon.ico          # 网站头部左边图片
├── /src/                  # 项目源码目录
│ ├── /package/            # 流程组件文件夹
│ │ ├──├── task-list       # 任务列表组件文件夹
│ │ ├──├── workflow-edit   # 流程编辑组件文件夹
│ ├── /services/           # 数据接口/类型
│ │ ├── ****               # 对应业务接口文件夹
│ │ ├──├── index.ts        # 接口定义
│ │ ├──├── typings.d.ts    # 对应业务的类型
│ │ ├── typings.d.ts       # 公共类型
│ ├── /assets/             # 静态资源,图片或公共的css文件
│ ├── /components/         # 公共组件目录
│ ├── /router/             # 路由
│ ├── /store/              # vuex相关文件
│ ├── /styles/             # 全局样式相关
│ ├── /views/              # 页面组件
│ ├── /utils/              # 工具函数
│ │ ├── http               # 异步请求封装
│ │ └── common.ts          # 公共方法
│ ├── App.vue              # 根组件,首页加载的Vue资源
│ ├── main.ts              # 入口文件
│ ├── conf.ts              # 请求接口域名配置
│ ├── style.less           # 全局样式
├── /types/                # ts类
│ ├── /auto-import.d.ts    # 全局方法导出
├── .editorconfig          # 针对不通的编辑器和IDE之间对于代码风格的设定
├── .eslintignore          # 忽略不需要检查的文件
├── .eslintrc-auto-import.js # Eslint忽略全局导入名单
├── .eslintrc.js           # Eslint代码规范配置
├── .gitignore             # git忽略添加文件
├── .prettierignore        # 忽略需要格式的文件
├── .stylelintignore       # Stylelint忽略添加文件
├── components.d.ts        # 全局公共组件，无需在页面中二次引入
├── index.html             # 入口页面文件,加载id为app的模板组件
├── package.json           # 项目信息，向npm获取依赖的请求信息
├── postcss.config.js      # 针对postcss的配置
├── prettier.config        # 针对postcss的配置
├── README.md              # 项目说明文档
├── .stylelint.config.js   # Stylelint配置文件，css规范
├── tsconfig.json          # ts配置文件
├── tsconfig.node.json     # tsnode配置文件
├── vite.config.ts         # 项目的配置文件
├── yarn.lock              # 记录当前状态下实际安装的各个yarn package的具体来源和版本号
```

### 插件说明
[Composition API](https://cn.vuejs.org/guide/extras/composition-api-faq.html#better-logic-reuse)

| 插件 | 作用 | 版本 |
| :---: | :---: | :---: |
| @vueuse/core | VueUse 是一个基于 [Composition API] 的实用程序函数集合 | 8.7.5 |
| axios | 发送ajax请求给后端请求数据 | 0.27.2 |
| pinia | Vue 状态管理库 | 2.0.14 |
| dayjs | 是一个现代浏览器解析、验证、操作和显示日期和时间 | 1.11.10 |
| loadsh | 是一个一致性、模块化、高性能的 JavaScript 实用工具库。 | 0.0.4 |
| pinia-plugin-persist | Vue 状态数据持久化 | 1.0.0 |
| qs |  一个查询字符串解析和字符串化库 | 6.10.5 |
| ant-design-vue | ant Vue 组件库 | 4.x |
| vue | 提供前端交互 | 3.3.4 |
| vue-router | 路由式编程导航 | 4.0.16 |
| vite | 前端工具链 | 4.4.0 |
| eslint | 代码规范工具 | 8.17.0 |
| less  | 方便样式开发 | 4.1.3 |
| unplugin-auto-import | 全局方法导出 | 0.9.1 |
| unplugin-vue-components | 全局组件导出 | 0.19.9 |
| @vitejs/plugin-legacy | Vite 的默认浏览器支持基准是 Native ESM、native ESM Dynamic import 和 import.meta。此插件为在为生产而构建时不支持这些功能的旧版浏览器提供支持 | 4.1.1 |

## Git 提交规范

- `ci`: ci 配置文件和脚本的变动;
- `chore`: 构建系统或辅助工具的变动;
- `fix`: 代码 BUG 修复;
- `feat`: 新功能;
- `perf`: 性能优化和提升;
- `refactor`: 仅仅是代码变动，既不是修复 BUG 也不是引入新功能;
- `style`: 代码格式调整，可能是空格、分号、缩进等等;
- `docs`: 文档变动;
- `test`: 补充缺失的测试用例或者修正现有的测试用例;
- `revert`: 回滚操作;