# vue3.x-h5-template-vite

**Repository Path**: bianpengfei/vue3.x-h5-template-vite

## Basic Information

- **Project Name**: vue3.x-h5-template-vite
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2022-01-04
- **Last Updated**: 2022-01-07

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 移动端模板脚手架

> 当前是基于vue3.x进行开发， 路由、API、状态管理都支持模块化
> 路由缓存/过渡动画
> 移动端写UI单位，用rem作为单位，假如设计图尺寸是 750x1330，单位： 1px = 0.02rem

# 目录结构 **
```lua
─api                        --api目录   
├─components                --全局组件
│  ├─base                   --全局基础组件，不依赖业务组件, g-开头
│  └─business               --业务型组件  g-开头
├─libs                      
│  ├─assets                 --静态文件存放地址
│  ├─directive              --指令
│  ├─layout                 --UI布局
│  ├─plugins                --插件
│  ├─style                  --全局样式
│  │  ├─app                     --app的样式和变量
│  │  ├─font                    --阿里矢量图    
│  │  └─vant                    --vant样式和变量
│  └─utils                  --业务工具包
├─router                    --路由
│  └─modules
├─store                     --全局状态管理
│  ├─modules
│  └─plugins
└─views                     --视图（存放页面）
    ├─404                   
    ├─authorization             --授权中间件
    ├─department                --科室页面
    ├─doctor                    --医生页面
    ├─home                      --首页        
    ├─president                 --院长
    └─test                      --测试
```
| 技术             | 说明           | 官网                                   |
|----------------|--------------| -------------------------------------- |
| Vue3.x         | 前端框架         | https://vuejs.org/                     |
| Vue-router 4.x | 路由框架         | https://router.vuejs.org/              |
| Vuex 4.x       | 全局状态管理框架     | https://vuex.vuejs.org/                |
| Vant 3.x       | 移动端UI框架      | https://vant-contrib.gitee.io/vant/#/zh-CN/         |
| @bianpengfei/utils | 自己封装常用的utils |https://www.npmjs.com/package/@bianpengfei/utils                                                   |

# 统一开发工具

vscode、webstorm

# 路由配置说明

## 配置说明
| 参数             | 类型                  | 说明                                   |   默认值  | 是否必填 |
|----------------| --------------------- | -------------------------------------- |-----|------|
| path        | string              | 路由路径                 |     | 是    |
| name | string              | 路由别名(用来缓存）可以不用设置                |     | 否    |
| meta        | object      | 存放头部信息                |   {}    | 否    |
| component       | promise            | 返回vue实例              |     |  是    |
|    children             |    array                |           存放子vue实例的集合           |     |     否  |


## 上面的meta里面参数解释：
| 参数             | 类型      | 说明               | 默认值   | 是否必填            |
|----------------|---------|------------------|-------|-----------------|
| title        | string  | 标题               |       | 否（注：最好写一下，方便维护） |
| name | string  | 路由别名(用来缓存）可以不用设置 |       | 否               |
| permanentCache        | boolean | 是否永久缓存           | false | 否               |
| cache       | boolean | 普通路由是否缓存         |       | 是               |
|    tabbarHidden             | boolean   | 底部tab是否隐藏      |       | 是               |