1 目录规范
文件夹的命名规范遵循《命名规范》中的目录命名规范，全部采用小写的 kebab-case 命名，有复数结构时采用复数命名，缩写不使用复数。
同时强调，不建议编造或滥用缩写，不建议在文件夹名称中出现下划线。
// bad 不推荐
script/
├ Configs/
source_code/
├ comp/
├─ mybtns/
├ pageview/
├ _UTILS/
// good 推荐
scripts/
├ config/
src/
├ components/
├─ my-buttons/
├ views/
├ utils/
对于规模较小的前端项目，我们推荐的目录文件组织方式如下
/** 针对规模较小的前端项目 */
configs/ 存放非固定路径的配置信息文件，部分配置文件必须保持在项目根目录下
├ tsconfig.*.json 【示例】TypeScript配置文件，可能存在多份
├ tslint.*.json 【示例】tslint配置文件，可能存在多份
├ webpack.*.conf.js 【示例】webpack配置文件，可能存在多份。
dist/ 代码编译目标文件夹
public/ 静态资源文件根目录
├ fonts/
├ images/
├ index.html
scripts/ 【可选】存放项目的npm命令可执行脚本
shims/ 【可选】使用TypeScript的情况下，需要对类型定义做扩充时使用的文件目录
├ global.d.ts 【示例】对Window等全局对象进行类型定义拓展
├ json-file.d.ts 【示例】对json文件导出的对象进行类型定义拓展
├ vue.d.ts 【示例】对Vue实例进行类型定义拓展
├ *.d.ts 【示例】以及其它各种各样的类型定义拓展文件，多份
src/ 项目源码根目录
├ assets/ 变动较为频繁的资源文件目录
├─ fonts/
├─ images/
├ components/ 项目中使用的业务组件目录，跨项目使用的组件请打包发布到私有制品库
├─ base/ 【可选】基础组件，如果完全使用第三方组件库一般不需要
├─ layout/ 【可选】布局组件，如果完全使用第三方组件库一般不需要
├─ data-grid/ 其它组件按功能命名文件目录
├ enums/ 【可选】项目中使用的枚举对象文件目录
├─ responseStatus.js
├─ httpMethods.json
├ router/ 项目前端路由相关配置文件夹
├─ modules/ 【可选】各模块前端路由配置文件目录，若使用后端服务提供和注册前端路由则不需要，简单项目也可省略
├── index.js
├─ guards.js 前端路由导航守卫
├─ index.js 前端路由入口文件，对于简单项目里面可能会包含路由定义和动态路由注册逻辑。
├─ registry.js 【可选】动态路由注册入口文件，简单项目可省略
├ services/ 【可选】前端调用后端服务的文件目录，简单项目可省略
├─ orderService.js 【示例】订单服务，暴露例如fetchActiveOrders(), fetchOrderDetailById(id)等方法
├─ authorizeService.js 【示例】用户鉴权服务，暴露login、logout等方法
├ store/ 【可选】Vuex Store目录文件，若不使用vuex则不需要
├─ modules/
├── index.js
├─ getters.js
├─ mutation-types.js
├ styles/ 项目内的样式定义文件目录
├─ components/ 项目内组件样式定义文件目录（若直接定义在src/components中则可以省略）
├─ overrids/ 项目中对第三方依赖的改写，可省略
├─ global.scss 全局样式定义（被打包器注册），不包含reset.css这类文件的内容，是为增加前端辨识度的全局定义，例如基于design token的变量定义
├─ index.scss 样式入口文件，组织类似第三方依赖的样式、themes、reset.css等文件
├ utils/ 项目中跨模块使用的工具方法文件目录
├ views/ 项目视图层代码
├─ order/ 【示例】按业务模块组织视图层内容
├── columns.js 【示例】列表数据列定义文件
├── Detail.vue
├── List.vue
├─ Login.vue 登录页面
├─ NotFound.vue 404未找到资源页面
├─ Unauthorized.vue 403未授权页面
├─ InternalServerError.vue 500服务器错误页面
├ index.js 前端项目入口，包含第三方依赖（UI组件库、Vue插件、jsbridge）的引用和入口挂载点的声明
test/ 项目测试代码根目录
├ e2e/ e2e测试相关文件目录
├ unit/ 单元测试相关文件目录
.browserslistrc 目标浏览器的范围配置文件，供@bable/preset-env或autoprefixer使用
.env.* 环境配置文件，可能存在多份
.eslintignore eslint忽略内容设置
.eslintrc.js eslint配置文件，文件类型可以是js、json等
.gitignore git忽略内容设置
.prettierrc prettier插件配置文件
.stylelintrc.js stylelint配置文件
README.md 项目说明文件
babel.config.js babel配置文件，文件类型可选
package.json 项目描述文件
postcss.config.js postcss配置文件
vue.config.js vue-cli配置文件
而规模较小的前端项目，我们推荐的目录文件组织方式如下。
同时，建议在条件允许的情况下使用微前端技术将项目进行拆分，避免项目过大带来的编译打包问题。
bins/ 【可选】存放shell脚本、git命令等内容，较大项目可能包含更多的构建命令
configs/ 存放非固定路径的配置信息文件，部分配置文件必须保持在项目根目录下
├ tsconfig.*.json 【示例】TypeScript配置文件，可能存在多份
├ tslint.*.json 【示例】tslint配置文件，可能存在多份
├ webpack.*.conf.js 【示例】webpack配置文件，可能存在多份。
dist/ 代码编译目标文件夹
public/ 静态资源文件根目录
├ fonts/
├ images/
├ index.html
scripts/ 【可选】存放项目的npm命令可执行脚本
shims/ 【可选】使用TypeScript的情况下，需要对类型定义做扩充时使用的文件目录
├ global.d.ts 【示例】对Window等全局对象进行类型定义拓展
├ json-file.d.ts 【示例】对json文件导出的对象进行类型定义拓展
├ vue.d.ts 【示例】对Vue实例进行类型定义拓展
├ *.d.ts 【示例】以及其它各种各样的类型定义拓展文件，多份
src/ 项目源码根目录
├ assets/ 变动较为频繁的资源文件目录
├─ fonts/
├─ images/
├ components/ 项目中『跨业务模块』使用的业务组件目录，跨项目使用的组件请打包发布到私有制品库
├─ base/ 【可选】基础组件，如果完全使用第三方组件库一般不需要
├─ layout/ 【可选】布局组件，如果完全使用第三方组件库一般不需要
├─ data-grid/ 【示例】其它组件按功能命名文件目录
├ enrich/ 【可选】项目引用第三放依赖（UI组件库、插件等）的相关代码、配置所属文件目录。内容较少时可省略
├ enums/ 【可选】项目中『跨业务模块』使用的枚举对象文件目录。
├─ responseStatus.js
├─ httpMethods.json
├ router/ 项目前端路由相关配置文件夹
├─ guards/ 前端路由导航守卫文件目录
├─ modules/ 【可选】各模块前端路由配置文件目录，若使用后端服务提供和注册前端路由则不需要。
├── index.js
├─ index.js 前端路由入口文件，引用guards中的路由导航、modules中的静态路由，使用registry中的动态注册逻辑，构造完整的前端路由实例。
├─ registry.js 【可选】动态路由注册入口文件，若完全使用静态路由则不需要。
├ services/ 前端调用后端服务的文件目录，此处仅存放『跨业务模块』使用的那些服务调用。
├─ authorizeService.js 【示例】用户鉴权服务，暴露login、logout等方法
├─ userInfoService.js 【示例】用户查询服务，暴露fetchUserInfoById等方法
├ store/ 【可选】Vuex Store目录文件，若不使用vuex则不需要
├─ modules/
├── index.js
├─ getters.js
├─ mutation-types.js
├ styles/ 项目内的样式定义文件目录
├─ components/ 项目内组件样式定义文件目录（若直接定义在src/components中则可以省略）
├─ overrids/ 项目中对第三方依赖的改写，可省略
├─ global.scss 全局样式定义（被打包器注册），不包含reset.css这类文件的内容，是为增加前端辨识度的全局定义，例如基于design token的变量定义
├─ index.scss 样式入口文件，组织类似第三方依赖的样式、themes、reset.css等文件
├ utils/ 项目中跨模块使用的工具方法文件目录
├ modules/ 当项目规模较大，则在该目录下分业务场景进行业务模块代码的管理，提高业务代码集中度同时便于未来项目拆分。
├─ transaction/ 【示例】业务模块，一般针对一个「业务领域」，例如金融交易管理（涵盖委托管理、成交管理、分红管理、持仓管理）
├── components/ 【可选】该业务模块下的组件
├── enums/ 【可选】该业务模块下的枚举对象
├── utils/ 【可选】该业务模块下的工具方法
├── services/ 【可选】该业务模块下的服务调用
├── views/ 该业务模块下的视图层代码目录
├─── bonus/ 该业务领域中的某一类业务功能。
├──── columns.js
├──── List.vue
├──── Detail.vue
├─── deals/
├─── orders/
├─── positions/
├ views/ 项目通用的视图层，存放非业务模块的视图相关文件
├─ Login.vue 登录页面
├─ NotFound.vue 404未找到资源页面
├─ Unauthorized.vue 403未授权页面
├─ InternalServerError.vue 500服务器错误页面
├ index.js 前端项目入口文件，引用enrich/index.js等文件
test/ 项目测试代码根目录
├ e2e/ e2e测试相关文件目录
├ unit/ 单元测试相关文件目录
.browserslistrc 目标浏览器的范围配置文件，供@bable/preset-env或autoprefixer使用
.env.* 环境配置文件，可能存在多份
.eslintignore eslint忽略内容设置
.eslintrc.js eslint配置文件，文件类型可以是js、json等
.gitignore git忽略内容设置
.prettierrc prettier插件配置文件
.stylelintrc.js stylelint配置文件
README.md 项目说明文件
babel.config.js babel配置文件，文件类型可选
package.json 项目描述文件
postcss.config.js postcss配置文件
vue.config.js vue-cli配置文件
