@fubinbin/work-flow-ui

v0.0.16

Published

a year ago

<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

Downloads

0High
0Medium
0Low

fubinbin

hanbo3023

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>

全部组件如下

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 |

Git 提交规范

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