# vh-mobile-demo

**Repository Path**: JS-VeryHappy/vh-mobile-demo

## Basic Information

- **Project Name**: vh-mobile-demo
- **Description**: vh-mobile组件库的实例项目，用来生成打包成H5方便查看组件效果
- **Primary Language**: JavaScript
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 2
- **Forks**: 1
- **Created**: 2022-04-08
- **Last Updated**: 2025-05-22

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 框架说明

> 1. Taro 及其生态 进行二次封装的脚手架。
> 2. 项目中的业务资源和业务相关配置需要根据业务调整和自行补齐。

# 框架特点

> 1. 框架思想：让开发变得简单，从编写式开发提升为开发配置综合式开发，大大提升开发效率和开发统一性。
> 1. 组件思想：业务组件是以项目业务的 UI 呈现形式为主的组件、具有特定业务性、贴近业务本身。
> 1. 通用性：具备相同业务通用性（例如：一家公司有多个管理后台、UI 呈现都基本一致、可以使用相同的组件）。
> 1. 脚手架封装二次封装表单和表格等组件、让编写业务可以配置化。

## 项目架构

vh-mobile: [https://js-veryhappy.gitee.io/vh-mobile/](https://js-veryhappy.gitee.io/vh-mobile/)

(taro + recoil + vantui + Less + TypeScript  )

Taro 中文网： [http://taro-docs.jd.com/taro/docs/README](http://taro-docs.jd.com/taro/docs/README)

React 官网： [https://react.docschina.org/](https://react.docschina.org/)

Recoil 官网(react 状态库)： [https://recoiljs.org/zh-hans/](https://recoiljs.org/zh-hans/)

vantui: [https://antm-js.gitee.io/vantui/#/home](https://antm-js.gitee.io/vantui/#/home)

Less 官网： [https://less.bootcss.com/](https://less.bootcss.com/)

TypeScript 官网： [https://www.tslang.cn/](https://www.tslang.cn/)

## vscode 插件安装

[ESLint](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint) 代码格式风格验证

[Prettier](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode) 代码格式风格验证自动补全

[stylelint](https://marketplace.visualstudio.com/items?itemName=stylelint.vscode-stylelint) 样式风格验证

[git-commit-plugin](https://marketplace.visualstudio.com/items?itemName=redjue.git-commit-plugin) 提交 git 文案工具

### vscode 本地 settings.json

```
{
  "editor.formatOnSave": true,
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "[javascript]": {
    "editor.formatOnSave": true,
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  // 检索过滤
  "search.exclude": {
    "**/node_modules": true,
    "**/bower_components": true,
    "**/dist": true
  },
  "GitCommitPlugin.CustomCommitType": [
    {
      "label": "feat",
      "detail": "add 'comments' option"
    },
    {
      "label": "fix",
      "detail": "fix some bug"
    },
    {
      "label": "docs",
      "detail": "add some docs"
    },
    {
      "label": "UI",
      "detail": "better styles"
    },
    {
      "label": "chore",
      "detail": "Made some changes to the scaffolding"
    },
    {
      "label": "locale",
      "detail": "Made a small contribution to internationalization"
    }
  ]
}

```

## 文件结构大致

```txt
├── README.md //说明文件
├── config //配置目录
│   ├── webpack //webpack的相关配置
│   ├── dev.js //开发配置
│   ├── index.js //公用配置
│   └── prod.js //正式配置
├── mock //mock模拟数据目录
│   └── api.ts
├── package.json
├── src
│   ├── app.config.ts //页面相关配置
│   ├── app.css //全局样式文件
│   ├── app.tsx //入口文件
│   ├── access.ts //页面权限和节点权限验证方法
│   ├── global.ts //应用全局layout配置，可以配置全局使用的公用业务
│   ├── assets //资源存放目录
│   │   └── images
│   ├── components //组件目录
│   │   ├── MainContainerCustom //全局每个pages必须继承的公用组件实现了每个页面的公用
│   │   ├── ErrorBoundaryCustom //全局错误捕获
│   │   ├── AuthCustom //全局点击需要验证登录和验证权限验证
│   │   └── ...//其它
│   ├── models //全局状态目录
│   │   ├── DebugObserver.ts //状态变化监听日志
│   │   ├── useGlobalModel.ts //全局公用状态
│   │   ├── useUserModel.ts //全局用户状态
│   │   └── ... //其它
│   ├── pages
│   │   └── index //存放页面
│   ├── hooks //自定义hooks存放文件夹
│   │   └── usexxxx.ts
│   ├── services //请求目录
│   │   ├── config.ts //请求拦截器
│   │   ├── handler.ts //请求类型封装
│   │   └── api //存放请求目录
│   └── utils //公用工具或方法存放目录
│       ├── eventsBus.ts //全局事件触发
│       ├── storage.ts //全局存入本地库
│       ├── validator.ts //全局表单和提交验证库
│       ├── wechat.ts //微信网页授权封装
│       └── index.ts //业务公用 单独引入使用
├── global.d.d.ts //ts类型声明
└── tsconfig.json //ts配置文件

```

## 打包

本地开发环境： `pnpm dev:weapp`

线上正式环境： `pnpm build:h5`

### 地址和说明

项目逻辑，交互，功能请阅读 RP

项目 GIT： ``

项目 RP： ``

项目 UI： [蓝湖地址]()

接口 API： [接口文档]()

测试 JIRA： [JIRA 地址]()

### 测试/开发登录路径

/login

### 账号

# LICENSE

MIT