hickey-ui

基于 vite4 + vue3 + less + ant-design-vue 二次开发组件库

Quick start

你可以直接 clone 这个项目，作为项目的基础，一切都是准备好的。

git clone https://gitee.com/beisir/hickey-ui.git
cd hickey-ui
npm install && npm run build

Feature

• 对项目结构进行细微优化。对各资源模块进行归类、细分；编写、维护、查找更便利。

• 集成组件库。可通过 ant-design-vue 快速开发功能。

• 集成 Prettier & Eslint。检测代码潜在问题的同时，统一团队代码规范。

• 集成 git hooks。只允许提交符合规范的代码，保持代码库干净整洁。

Directory

├── README.md          // 项目说明
├── vite.config.ts     // 项目配置
├── tsconfig.node.json // TypeScript configuration
├── tsconfig.json      // tsconfig
├── .eslintignore      // eslint忽略清单
├── .eslintrc.js       // eslint配置
├── .gitignore         // git忽略清单
├── .prettierrc.js     // prettier配置
├── package-lock.json  // package.json锁定
├── yarn.lock          // package.json锁定-yarn
├── package.json       // npm配置
├── .env.production    // 生产环境变量配置
├── .env.development   // 开发环境变量配置
├── .env.staging       // 测试环境变量配置
│
├── public          // 公用文件，不经过webpack处理
│   ├──
│   ├──
│   └──
│
└── packages
    ├── index.js
    │
    ├── assets    // lottie动画、image、svg等资源
    │   ├── images  // image图标库
    │   │   └── user   // 不同业务对应不同文件夹
    │   │       └── xhk.png
    │   ├── logo-txt.png
    │   ├── logo.png
    │   ├── lottie  // lottie动画库
    │   │   └── red-card-popup.json
    │   └── svg     // svg图标库
    │       └── ufo.svg
    │
    ├── components    // 业务公用组件、原子组件
    │   ├── Empty.vue           // 缺省页组件
    │   └── CButton             // 按钮封装组件
    │
    ├── hooks
    │   ├── useCreateDialog.ts  // 创建方法弹窗
    │   ├── useCurrentInstance.ts  // 获取全局proxy
    │   ├── userClipboard.ts    // 复制文本方法
    │   └── useLoading.ts       // 上拉加载公共方法
    │
    ├── config    // 配置层，包括常量配置、接口配置
    │   ├── component       // 组件相关hooks
    │   ├── core            // 测试环境配置
    │   ├── index.ts        // 聚合
    │   └── event           // 事件相关hooks
    │
    ├── router    // 路由层
    │   ├── index.js    // router功能配置、路由监听
    │   └── routes.js   // 所有路由
    │
    ├── types    // ts限定数据类型
    │   │
    │   └── xx.xx.d.ts   // 定义Ts类型
    │
    ├── utils  // 工具层
    │   ├── vant.service.ts           // ui库按需引入
    │   ├── http.service.ts           // axios接口全局拦截器
    │   ├── staticData.service.ts     // 静态数据配置项
    │   ├── init.service.ts           // 路由鉴权、修改title
    │   ├── localStorage.service.ts   // localstorage操作
    │   ├── sessionStorage.service.ts // sessionStorage操作
    │   ├── validation.service.ts     // 校验相关操作
    │   └── utils.service.ts          // 工具方法
    │
    └── src    // 组件测试目录
        └── Home
            ├── Demo  // 业务
            │   ├── index.less  // 业务样式（少可以不分离，但建议分离）
            │   └── index.vue   // 业务page
            └── modules   // 业务功能组件
                └── Child.vue

# 开发调试
npm run dev

# 生产构建
npm run build

# 预览生产环境
npm run build:test

# eslint
npm run lint

ant-design-vue 文档地址

https://antdv.com/components/overview-cn

Vscode 插件 (建议安装)

• ESLint
• Prettier - Code formatter
• PrettierConfig fro VS Code
• TypeScript Vue Plugin (Volar)
• Vue - Official

组件使用示例

<header>
  <PopConfirmButton
    type="danger"
    title="确认删除吗？"
    @confirm="() => console.log('confirm')"
    @cancel="() => console.log('cancel')"
  >
    <img alt="Vue logo" class="logo" :src="logo" width="125" height="125" />
  </PopConfirmButton>

  <CButton type="primary">测试clcik</CButton>
</header>
<script lang="ts" setup>
  import { PopConfirmButton, CButton, utils, hooks } from 'hickey-ui';
  // import { PopConfirmButton, CButton } from 'hickey-ui/libs/es/packages/components';
  // import hooks from 'hickey-ui/libs/es/packages/hooks';
  // import utils, { isNumber } from 'hickey-ui/libs/es/packages/utils';
  console.log('===============>isNumber', isNumber('1234'));
  console.log('===============>utils.isNumber', utils.isNumber('1234'));
</script>