使用ant design pro搭建项目

脚手架搭建
git clone --depth=1 https://github.com/ant-design/ant-design-pro.git my-project
然后  cd my-project

项目的目录结构：
config    umi配置，包含路由，构建等配置
mock      本地模拟数据
public   
favicon    Favicon
src
assets    本地静态资源
components    业务通用组件
e2e    集成测试用例
layouts   通用布局
models    全局  dva  model
pages    业务页面入口和常用模板
services   后台接口服务
utils    工具库
locales   国际化资源
global.less   全局样式
global.js   全局JS
tests   测试工具
README.md
package.json


编辑样式文件直接采用css module
css的规则都是全局作用域；而css modules通过使用一个独一无二的clsss的名字，所以不会与其他选择器重名，从而产生局部作用域；；；
CSS Modules 提供各种插件，支持不同的构建工具
composes关键词 实现类似继承extend的效果  甚至可以跨文件进行继承
.serif-font {
font-family: Georgia, serif;
}
.display {
composes: serif-font;
font-size: 30px;
line-height: 35px;
}

如果需要，也可以在样式文件的头部引入antd样式变量文件
编辑样式文件，在样式文件的头部引入antd样式变量文件
@import "~antd/lib/style/themes/default.less";
eg：使用less进行样式编辑
在index.less文件中编写样式，
在该文件第一行引入@import "~antd/lib/style/themes/default.less";
编写样式  .top{ height: 20px; }
在对应的js文件中引入  import styles from './index.less'
<div className={styles.top}>就可以了
编辑样式文件，在样式文件的头部引入antd样式变量文件
@import "~antd/lib/style/themes/default.less";
eg：使用less进行样式编辑
在index.less文件中编写样式，
在该文件第一行引入@import "~antd/lib/style/themes/default.less";
编写样式  .top{ height: 20px; }
在对应的js文件中引入  import styles from './index.less'
<div className={styles.top}>就可以了

使用:global设置全局样式

样式文件类别：
全局样式文件  src/index.less  进行一些通用设置
src/utils/utils.less    防止一些工具函数供调用，比如清除浮动 .clearfix
模块样式    针对某个模块、页面生效的文件
通用模块级
页面级
组件级
还有内联样式  style={{...}}来设置
覆盖样式文件   覆盖是全局性的，所以为了防止对其他的组件产生影响，需要包裹额外的className限制样式的生效范围
  <Select
    mode="multiple"
    style={{ width: 300 }}
    placeholder="Please select"
    className={styles.customSelect}
  >
    {children}
  </Select>
对应样式
.customeSelect {   额外的className
:global {        全局样式，进行覆盖
.ant-select-selection {    被覆盖的类名
max-height: 51px;
overflow: auto;
}
}
}

Ant Design Pro抽离了使用过程中的通用布局，都放在layouts目录，分别为：
BasicLayout: 基础页面布局，包含了头部导航，侧边栏和通知栏
UserLayout：抽离出用于登陆注册页面的通用布局
BlankLayout: 空白的布局
布局通常是和路由紧密结合的，Ant Design Pro的路由采用umi的路由方案(umi不仅仅是前端构建工具，还包含了路由以及一套插件机制用于构建一个完整的React应用。)   
在config/router.config.js文件中进行路由配置
进行Pro扩展配置，即扩展一些关于pro全局菜单的配置
{
name: 'dashboard',
icon: 'dashboard',
hideInMenu:true,
hideChildrenInMenu:true,
hideInBreadcrumb:true,
authority:['admin'],
name:当前路由在菜单和面包屑中的名称，注意这里是国际化配置的key，具体展示菜单名可以在/src/locales/zh-CN.js进行配置
}

Ant Design的两套布局组件工具 Layout和 Grid .
Grid组件
栅格布局：按照一定比例划分页面，能够随着屏幕的变化依旧保持原比例
栅格布局包含：
container:包裹整个栅格系统的容器
rows:行
columns:列
gutters:各列之间的空隙
对于container,容器的宽度我们通常设置为100%，也可以为更大的显示器设置最大宽度max-width
.grid-container{ width:100% ; max-width:1200px ;}
对于row，行元素用于防止里面的列（column）溢出到其他的行。通常使用clearfix来清除浮动，因为我们是通过浮动来制作栅格系统的
.row:before,
.row:after { content: ""; display: table ; clear:both }
对于column,列元素是栅格系统的核心，常使用float

就是在row里定义多个column（列）
box-sizing:border-box;  设置成怪异盒模型
content-box; 设置成标准盒模型

Layout布局：协助进行页面级整体布局

构建和发布
项目开发完毕   打包应用  npm run build
由于Ant Design Pro使用的工具Umi已经将复杂的流程封装完毕，构建打包文件只需要umi build这一个命令,构建打包成功之后，
会在根目录生成dist文件夹，里面就是构建打包好的文件，通常是.js .css index.html等静态文件
如果需要自定义构建，可以在config/config.js配置（umi配置https://umijs.org/zh/guide/config.html）

分析构建文件体积（如果你的构建文件很大）
npm run analyze 构建并分析依赖模块的体积分布，从而优化代码（该命令会自动在浏览器打开显示体积分布数据的网页）

发布
只需要将最终生成的静态文件，dist文件夹的静态文件发布到你的cdn或者静态服务器即可，其中的index.html通常是你后台服务的入口文件，
在确定了js和css的静态之后可能需要改变页面的引入路径

 

 

转载于:https://www.cnblogs.com/luxiaot/p/antd.html