项目 ant-design-pro-master 结构

项目基本结构

-d config
-d functions
-d mock
-d public
-d scripts
-d src
-d tests
...以及以下的一些配置文件...
-f .gitignore
-f prettierignore
-f prettierrc
-f stylelintrc.json
-f jsconfig.json
-f package.json
...

文件夹 config

config 主要是一些做一些配置用途
有三个文件：

• config.js
• plugin.config.js
• router.config.js

router.config.js
这个文件是配置应用的路由入口

export default {
  {
    path:'user',
    component:'./path/layout/component',
    routes:[
      {path:'/user',redirect:'/user/login'},
      {path:'/user/login',component:'./path/component/login'},
      ...
    ]
  },
  {
    path:'/',
    component:'./path/component/root',
    Routes:['src/pages/Authorized'],
    routes:[
      {path:'/',redirect:'/dashboard/analysis'},
      {
        path:'/dashboard',
        name:'dashboard',
        icon:'dashboard',
        routes:[
          ...
        ]
      }
    ]
  }
}

通过以上的代码结构可以看出路由的结构类似于 Angular 或 Vue 的路由结构
其简单的结构为

export default [
  {
    path,
    component,
    routes[
      {
        path,
        name,
        icon,
        routes,
        component,
        hideInMenu,
        redirect,
      }
    ],
    Routes,
    hideChildrenInMenu,
    icon,
    name,
    redirect,
    Routes
  }
]

最简单的路由

export default [
  {
    component:'404'
  }
]

config.js
plugin.config.js
这两个文件主要是配置，如：主题颜色，路由，样式编译打包处理的配置

文件夹 src

global.less 是一个全局 less 样式文件
defaultSetttings.js 应用的默认配置文件
内容包括：

• 应用导航颜色
• 主题色
• 内容区域布局方式
• 侧边菜单
• 头部菜单是否固定
• 是否自动隐藏头部
• 是否需要固定侧边栏

assets 资源文件夹，如svg,less,css... etc

component layout pages 三者之间的区别

component 为 pages 服务，可以在多个 pages 使用
layouts 为 component 服务，可以使用在多个 component 使用
pages 主要用于负责应用导航的路由需要展示的页面服务，是 layouts 和 component 的集合

components 文件夹存放可复用的组件
文件列表

index.js
index.d.ts
README.md
index.less
...以及其他逻辑处理文件...

1. index.d.ts 此为typescript 的声明文件用于在编辑器中做提示使用。因为在 typescript 环境中没有全局变量的概念
2. index.js 组件的入口文件
3. index.less 组件的 less 样式文件

特别说明一个 less 样式文件引入

@import '~antd/lib/style/themes/default.less';

可以看到上文引入的样式路径是以 ~ 开头， webpack 编译时会替换为 node_modules 的路径。需要注意的是：不要把 ~ 写成 ~/ 的形式，因为 ~/ 表示的是主目录路径。

layouts 目录主要存放页面布局的组件，如：grid,flex,fluid,header,footer, user,admin,menu...etc
locales 主要存放国际化多语言的配置文件 ，如: en-US.js,zh-CN.js ...etc
简单结构如下：

// zh-CN.js
export default {
  "navbar.lang":'china',
   ...
}

//en-US.js
export default {
  "navbar.lang":"english"
}

models 这里就存放 dva实现的那一套（公共部分)

pages 存放的是具体应用路由对应的页面
services 存放接口相关
utils 存放工具库相关，如：date,money,...etc

2018.9.7 天之骄子 深圳