relx-cli v3.3.1

relx 开发框架

commit msg 格式

<type>(<scope>): <subject>

示例：feat(page1): 添加轮播

type：

• feat：新功能（feature）
• fix：修补 bug
• docs：文档（documentation）
• style： 格式（不影响代码运行的变动）
• ref：重构（即不是新增功能，也不是修改 bug 的代码变动）
• test：增加测试
• chore：构建过程或辅助工具的变动

scope：页面名称

subject：描述

feature

• px 单位自动转 vw（jsx 行内样式不支持）
• mock 数据
• mobx
• router
• antd + antd-mobile 按需加载
• proxy
• css-module
• 页面类型切换

开发

确保已安装最新版 relx-cli（npm i relx-cli -g）

relx dev

打包

确保已安装最新版 relx-cli（npm i relx-cli -g）

relx build

format 所有文件

npm run format

如何配置 dev 模式端口号

配置project.config.js 内 devPort 字段, 不填默认为 3000

如何配置页面 meta 以及 title

src/pages.config.js 内配置

配置格式参考下面的例子，key 为输出的 html 文件名，例如下面的例子将输出index.html

path 为路径名，省略了 pages 路径，前面不要加 /

index: {
    path: 'home/index',
    title: '首页',
    meta: {
      description: 'relx电子烟领导者',
      Keywords: '电子烟,烟弹'
    }
  }

如何定义页面类型

src/pages.config.js 内配置 type 字段。目前可选 pc、wx。pc 不需要定义，默认为 pc

wx 会自动引入微信 cdn 的 jssdk，如下使用微信 jssdk

const { wx } = window;
wx.error(function(res) {
  console.log(res);
});

如何 px 转 vw

将样式文件名修改为 xxx_vw.less 或者 xxx_vw.module.less 格式即可

移动端页面转 vw 单位换算如何设置设计稿宽度

project.config.js 内配置 designWidth

如何 mock 数据

src/api/mock.js 内配置

key 值为 api url，value 为 mock 的数据

key 与 api url 严格相等时，fetch 的 then 值将是 mock 的数据。

无需修改任何业务代码，仅需配置 mock.js 即可

示例：

'/api/package.json' === /api/package.json

// page.jsx
fetchGet('/api/package.json').then(res => {
  console.log(res); // {list: [{id: 1}, {id: 2}]}
});

// mock.js
import Mock from 'mockjs';

export default {
  '/api/getList': Mock.mock({
    // 属性 list 的值是一个数组，其中含有 1 到 10 个元素
    'list|1-10': [
      {
        // 属性 id 是一个自增数，起始值为 1，每次增 1
        'id|+1': 1
      }
    ]
  }),
  '/api/getList2': function() {
    return Mock.mock({
      // 属性 list 的值是一个数组，其中含有 1 到 10 个元素
      'list|1-10': [
        {
          // 属性 id 是一个自增数，起始值为 1，每次增 1
          'id|+1': 1
        }
      ]
    });
  }
};

如何配置接口代理

配置project.config.js 内 proxy 字段

配置规则参考https://segmentfault.com/a/1190000016199721

例如联调地址为 http://127.0.0.1:5555/info，如下配置时/api/info 会转发到 http://127.0.0.1:5555/info

注意：target 地址前面一定要写上协议

proxy: {
    '/api': {
      target: 'http://127.0.0.1:5555',
      changeOrigin: true,
      pathRewrite: {
        '^/api': ''
      }
    }
  }

如何配置短路径 alias

project.config.js 内配置 alias 字段

默认已配置 src/api src/assets src/assets/images（img） src/components src/api src/utils

{
  api: '/src/api'
}

如何使用 antd

直接按需引用即可，使用 es6import 自动 treeshake，css 不错 shake

// index.less
@import '~antd/dist/antd.less'; // 定制主题时需要引入less
// or
@import '~antd/dist/antd.css';

// app.jsx
import { Button } from 'antd';

如何定制 antd 主题

@import '~antd/dist/antd.less';
@primary-color: red;
/* 或者 */
@import './yourtheme.less';

微擎开发

1. 配置模块名

module.exports = {
  index: {
    type: 'wx',
    path: 'admin-temp/index',
    title: 'admin',
    siteInfo: {
      // 微擎模块名称（用于拼接微擎规范的api url）
      wqModuleName: 'relx_index'
    }
  }
};

2. 调用 api 拼接微擎 url

import { formatWqUrl } from 'utils';
formatWqUrl('userInfo');