Skip to content
On this page

项目结构

项目结构统一,有利于多人协作以及后期代码维护,以下的项目结构是我们项目目前正在使用的。直接上代码:

ts
├── assets                          # 项目依赖资源管理
│   ├── icons                       # 存放svg图标
│   ├── imgs                        # 图片资源
│   ├── style                       # 样式资源
│   ├── locales                     # 国际化资源
│   └── js                          # 依赖的第三方sdk之类的js资源
├── core                            # 共享资源
│   ├── services                    # 各种服务信息
│   │   ├── index.ts                # 管理出入口
│   │   └── ...                     # 具体的不同业务/服务接口文件
│   ├── components                  # 公共组件
│   │   ├── src                     # 存放组件资源,文件夹内部同shared
│   │   │   ├── components          
│   │   │   ├── hooks       
│   │   │   ├── ...     
│   │   │   └── index.vue       
│   │   ├── index.ts                # 组件出入口
│   │   ├── index.less              # 组件样式
│   │   └── README.md               # 组件使用说明文档【可选】
│   ├── enums                       # 公共枚举值
│   │   ├── index.ts                # 管理出入口
│   │   └── ... 
│   ├── hooks                       # 钩子函数
│   │   ├── index.ts                
│   │   └── ... 
│   ├── directives                  # 自定义指令
│   │   ├── index.ts                
│   │   └── ... 
│   ├── stores                      # 数据仓库
│   │   ├── index.ts                
│   │   └── ... 
│   ├── types                       # 自定义类型
│   │   ├── index.ts                
│   │   └── ... 
│   ├── utils                       # 工具集
│   │   ├── index.ts                
│   │   └── ... 
│   ├── configs                     # 配置文件
│   │   └── ... 
├── views                           # 业务的所有页面
│   ├── modules                     # 具体业务所归属的文件夹(可以用业务名称作为文件夹名字)
│   │   ├── src                     # 内部组织结构同shared
│   │   └── index.vue               # 业务的唯一出口(包含路由与状态库)
├── main.ts                          
├── App.vue