@miaocunzhi/cli-umi v0.0.4
快速上手
默认集成了antd，动态路由注册加载，antd-extra等功能
代码目录说明
.
├── dist/ // 默认打包目录
├── mock/ // mock数据文件目录
└── src/ // 源码目录
├── assets/ // 静态资源目录，一般用于存放静态资源比如图片
├── common/ // 公用代码目录
├── component/ // 公共组件
├── layouts/ // 布局文件目录
├── index.js // 基础布局,绑定了ModalView
└── index.css // 基础布局样式
├── pages // 路由级页面组件目录，按模块拆分
├── exception/ // 异常路由组件目录
├── 404.js // 404 异常路由组件
├── main // 模块目录，名字自取，包含路由组件，样式，model和service
├── models
├── main.js // 模块对应的model文件
├── index.js // 路由组件
├── index.less // 模块对应的样式文件
└── service.js // 模块对应的接口请求文件
└── xxx // 自定义模块目录，按需添加
├── global.less // 全局样式文件
└── global.js // 在入口文件的最前面被自动引入，可以在这里加载补丁，做一些初始化的操作等。
├── .editorconfig // 编辑器格式约定文件，可以更改类似缩进的配置
├── .eslintrc // eslint配置文件，可以调整es6代码的检查约束配置
├── .umirc.js // umi的配置文件，需要根据项目调整publicPath路径，否则将导致发布后，动态加载的资源和JS路径错误,配置显示路由
└── package.jsonpage目录特殊说明
为了改变原有dva项目中，routes，models，services 这种按技术类型划分目录导致的模块代码结构混乱和不清晰的问题，现将一个模块的代码整体写到page目录下，该目录下包含路由组件，model文件，service文件，样式文件等，文件路径引用方式由代码自身决定
router注册说明，umi的router显示配置在umirc.js里
弹窗统一使用说明
import {ModalView} from "antd-extra"; // 弹窗组件
import ArtbagEdit from './artbagEdit'; // 弹窗内部的业务组件
// 需要弹窗的时机
ModalView.open(
ArtbagEdit, // 弹窗内部组件引用
{title: child ? '编辑工艺包' : '新建工艺包'},// 弹窗配置项，具体参见antd-extra的文档
{node, child} // 传入弹窗内部组件的props
);页面标题样式
import {PageTitle} from "antd-extra";
<PageTitle
actions={
<Button
type="primary"
disabled={!(selectNode && selectNode.artbagId)}
onClick={this.openEditArtbagVersion()}
>新建
</Button>
}
>工艺包版本列表
</PageTitle>用户主动操作的结果反馈
具体使用参见Ant Design的Message组件
- 何时使用
- 可提供成功、警告和错误等反馈信息。
顶部居中显示并自动消失，是一种不打断用户操作的轻量级提示方式。
全局展示通知提醒信息
目前脚手架提供全局异常捕获，model中的异步方法调用异常等会在全局捕获，model的effect方法中无需手动try catch处理
组件使用参见Ant Design的Notification组件
经常用于以下情况：
较为复杂的通知内容。
带有交互的通知，给出用户下一步的行动点。
系统主动推送。
删除等重要操作的确认提示
- table中的actions区域的按钮删除提示，请使用Popconfirm的气泡确认
<Popconfirm
title="是否确认删除该设备?"
onConfirm={this.confirmDelete.bind(this, record)}
okText="确认删除"
cancelText="取消"
>
<a>删除</a>
</Popconfirm>- 其他场景的删除提示请使用Modal的confirm，具体参见ant design的Modal组件
更多规范待出
安装 cli-umi
通过 npm 安装 cli-umi 并确保版本是 1.0.0 或以上。
$ npm install @mczowner/cli-umi -g
$ cli-umi -v
cli-umi version 1.0.0创建新应用
安装完 cli-umi 之后，就可以在命令行里访问到 cli-umi 命令（不能访问？）。现在，你可以通过 cli-umi new 创建新应用。
$ cli-umi new ziot-front-quickstart这会创建 ziot-front-quickstart 目录，包含项目初始化目录和文件，并提供开发服务器、构建脚本、数据 mock 服务、代理服务器等功能。
然后我们 cd 进入 ziot-front-quickstart 目录，并启动开发服务器：
$ cd ziot-front-quickstart
$ npm start几秒钟后，你会看到以下输出：
Compiled successfully!
The app is running at:
http://localhost:8000/
Note that the development build is not optimized.
To create a production build, use npm run build.在浏览器里打开 http://localhost:8000 ，你会看到 ziot-front 的demo界面。
构建应用
完成开发并且在开发环境验证之后。先执行下面的命令：
"start": "cross-env ESLINT=none SOCKET_SERVER=none umi dev",
"start:no-proxy": "cross-env NO_PROXY=true SOCKET_SERVER=none ESLINT=none umi dev",
"build:daily": "rimraf dist && cross-env ESLINT=none PATH_MODE=daily umi build",
"build:test": "rimraf dist && cross-env ESLINT=none PATH_MODE=test umi build"根据不同的环境执行 npm run build:daily或者npm run build:test
build 命令会打包所有的资源，包含 JavaScript, CSS, web fonts, images, html 等。然后你可以在 dist/ 目录下找到这些文件。
cdn配置
1，gitlab 增加webhook（菜单：setting-Integrations）：
url: http://10.45.29.3:7778/webhook
token: Hello
取消 Enable SSL verification 勾选2，修改 .umirc.js
const publicPaths = {
daily: 'http://10.45.29.3:9500/xxx/daily/',//此处 xxx 需要更改为实际项目名
test: '/cdn/xxx/',//此处 xxx 需要更改为实际项目名
demo: '/cdn/xxx/',//此处 xxx 需要更改为实际项目名
local:'http://localhost:8000/'
};3，至 vms-门户资源管理 菜单中配置cdn
4，创建远程分支 feature/daily , test
5， build daily 并 push