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