### ICSS-React项目

#### 注意:

    - 每个模块开发完成后,需要测试ie8下是否正常运行
    测试方法:
    --- 首先全局安装 `nodemon` --> npm i -g nodemon
    1. 项目根目录package.json下执行 
    npm run build  
    2. 生成dist目录后, 切换至dist/app下执行
    npm run server
    启动成功后,直接访问 127.0.0.1:8088
    

#### 使用方法
- 开发环境启动
```
npm run dev //启动前端构建服务
npm run dev-server //启动node层服务n
```
- 可以直接修改app下的node文件, 自动刷新node,
    添加对应业务逻辑, 具体文件作用,
    请参考开发规范

- 生成服务器文件
```
npm run build // 执行后直接上传到服务器
```

- 服务器开启服务
```
1.  git pull
2.  npm i -g yarn  *注意: 只需在第一次部署时全局安装, 后面就可直接跳过*
2.1 yarn 
3.  npm run pm2
```

#### 目录结构
- app           node层代码
    + config    配置文件
    + controllers 处理路由
    + logs 日志文件
    + middleware 中间件文件
    + services 业务逻辑文件
- bin/www       需执行的shell
- config        webpack配置文件
- src           源文件
- .babelrc      babel配置文件
- .eslintrc.js  eslint配置文件

#### 基础组件用法
- 1. Modal 
~参数~:
    + onClickConfirm    {fn}        点击确定按钮的回调函数
    + onClickCancel     {fn}        点击取消按钮的回调函数
    + onClickClose      {fn}        点击关闭按钮的回调函数
    + autoResizeHeight  {bool}      自动改变高度 
    + width             {num}       自定义宽度 
    + title             {str}       标题
    + overflow          {bool}      正文是否溢出滚动
    + noFooter          {bool}      是否显示底部footer
    + children          {Component} 子组件

```
<!--  示例: -->
<Modal overflow onClickConfirm={()=>{console.log(1)}}>
    <div>这里放子组件</div>                    
 </Modal>
```

-   2. Divider 
~参数~:
    + vertical      显示垂直线
    + horizontal    显示水平线

```
<!--  示例: -->
<其他组件/>
<Divider vertical/>
<其他组件/>
```

- 3. Panel组件 面板
~参数:~
    + IconLeft      {Component}     左侧的自定义icon
    + title         {str}           标题
    + show          {bool}          是否显示content 默认 false
    + children      {Component}     自定义需要显示的子组件
```
<!--  示例: -->
<Panel IconLeft={<Test/>} title="this is a title">
    <div>11121</div> // children
</Panel>
```
- 4. Tab组件 切换
~参数:~
    + tabPosition {string}              tab组件形式 默认值为horizontal 可选 vertical 即垂直或者水平显示
    + onTabClick  {function}            点击tab的回调函数
    + children    {Component|element}   子级元素,可以放入<Icon/>
    + active      {boolean}             是否显示active样式,主要是文字

    + TabPane组件
        参数
        - tab       {string}            tab标题
        - children  {Component|element} 子级元素

```
    // 示例
    <Tabs active tabPosition="vertical" onTabClick={(index)=>{
         console.log(index);
     }}>
        <TabPane key="1" tab="tab1">111</TabPane>
        <TabPane key="2" tab="tab2">121</TabPane>
        <TabPane key="3" tab="tab3">131</TabPane>
        <TabPane key="4" tab="tab4">141</TabPane>
     </Tabs>
```

#### 其他
- app/views/errorPage.html  // 当路由匹配错误会跳转到错误页面, 不会直接4xx/5xx, 将具体错误抛给用户

- 引入classnames模块辅助编写css类名

- ./src/common/less/variables.less 为定义的基础变量样式

- 添加jquery
 使用方式: ``` import $ from "jquery"; ```