newICSS

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 // 执行后直接上传到服务器
  

• 服务器开启服务 ```

• git pull

• npm i -g yarn 注意: 只需在第一次部署时全局安装, 后面就可直接跳过 2.1 yarn

• 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>
• 1. Tab组件 切换 ~参数:~
  • tabPosition {string} tab组件形式 默认值为horizontal 可选 vertical 即垂直或者水平显示
  • onTabClick {function} 点击tab的回调函数
  • children {Component|element} 子级元素,可以放入

  • 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";