npm package: @miaocunzhi/cli-umi
Description: The front project command line utility.
Author: miaocunzhi
Latest version: 0.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.json
```

## page目录特殊说明

为了改变原有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` 或以上。

```bash
$ npm install @mczowner/cli-umi -g
$ cli-umi -v
cli-umi version 1.0.0
```

## 创建新应用

安装完 cli-umi 之后，就可以在命令行里访问到 `cli-umi` 命令（[不能访问？](http://stackoverflow.com/questions/15054388/global-node-modules-not-installing-correctly-command-not-found)）。现在，你可以通过 `cli-umi new` 创建新应用。

```bash
$ cli-umi new ziot-front-quickstart
```

这会创建 `ziot-front-quickstart` 目录，包含项目初始化目录和文件，并提供开发服务器、构建脚本、数据 mock 服务、代理服务器等功能。

然后我们 `cd` 进入 `ziot-front-quickstart` 目录，并启动开发服务器：

```bash
$ cd ziot-front-quickstart
$ npm start
```

几秒钟后，你会看到以下输出：

```bash
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界面。



## 构建应用

完成开发并且在开发环境验证之后。先执行下面的命令：

```bash
    "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