@fubinbin/work-flow-ui NPM

node版本要求

版本：>16.0.0 推荐使用 nvm 来切换node版本 nvm命令如下：

nvm install node版本号
nvm use node版本号

接口域名

接口配置在conf.ts中修改

https://service.yishifuwu.cn/(无固定由自己项目决定)

接口请求使用

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

代理说明

vite.config文件中修改proxy.target域名为所需代理的域名
在conf.ts中修改对应代理的域名为'api'

安装依赖

yarn

运行

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

打包

yarn build

全局注册使用

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')

按需引入

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

<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 组件类型提示

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

目录结构

├── /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

插件	作用	版本
@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