目录说明

项目结构

├── dist #生成环境包
├── mock # mock数据
    └──  test.mock.js 
├── mock # mock数据
├── node_modules # npm依赖(执行npm install后自动生成,需要.gitignore)
├── public # 项目根路径资源目录，一般放置不会变动的资源，如网站的favicon
├── src # 业务代码目录，平台工具出码也是放在该目录
    ├── assets #静态资源目录
        ├── common #常用文件
        ├── iconfont #字体图标
        └──  status #错误页svg
    ├── components #通用组件库
        ├── common #常用组件
        ├── Form #表单用的组件
        ├── Global #全局组件，无需手动引入  
        └──  widgets #小部件 
    ├── directive # vue指令
        └──  auth #权限指令  
    ├── enum # 常用枚举值
    ├── hooks #
    ├── layouts #布局文件目录
    ├── page #页面目录
        ├── home #首页
        ├── login #登录页  
        ├── message #消息提醒
        ├── organ #组织机构
        ├── permission #权限管理
        └── ... 
    ├── router #路由文件
        └── modules 路由模块    
    ├── storage #本地缓存文件(localStorage)
    ├── stores #全局状态管理(`pinia`)  
    ├── styles # 全局样式
    ├── theme # 主题配置
    ├── utils # 工具函数
        ├── http.js #http请求
        ├── tool.js #工具方法
        └── ...
    ├── App.vue # 根组件
    └── main.js # 入口文件 
├── .env # 环境变量配置文件
├── .env.development # 开发环境变量配置文件
├── .env.production # 生成环境变量配置文件
├── .eslintrc.cjs # eslint配置文件
├── .gitignore 
└── index.html # index.html

页面代码结构推荐

为了让项目代码组织更加规范，让开发能够更方便的定位到相关页面组件代码，我们推荐了一套规范。

src
├── components
└── pages
    ├── Welcome       # 路由组件下不应该再包含其他路由组件，基于这个约定就能清楚的区分路由组件和非路由组件了
       ├── components # 对于复杂的页面可以再自己做更深层次的组织，但建议不要超过三层
       ├── Form.vue
       ├── index.vue  # 页面组件的代码
    ├── Order          
       ├── index.vue
      └── util.ts     # 这里可以有一些共用方法之类，不做推荐和约束，看业务场景自行做组织
    ├── User
       ├── components 
       ├── Login      
       ├── Register  
    └── *             # 其它页面组件代码