跳到主要内容
简介
欢迎使用CabinX文档，开始使用之前，请先阅读研发中的文档，对框架有个整体的了解。

什么是CabinX？​

Cabin X 是 DMALL 的企业级设计系统，用于构建体验一致的B端零售产品，助力企业提高经营效率，改善消费者体验。整套系统以 Essence 本质 设计语言为基础，由前端代码、设计工具、人机界面指南以及内部贡献者组成。

特点​

  • 一套代码跨多平台

使用者仅聚焦业务，代码编写完成后可修改脚手架配置生成不同端代码，同一套代码在不同端有更适合该端的交互体验。目前支持PC，MOBILE，部分支持PAD。

  • 对外封闭，对内开放

区别于三方UI库，为保证系统多个项目的体验一致性，对外，CabinX页面不能使用原生HTML标签，仅能使用框架提供的组件标签。对内，当遇到框架组件无法满足的场景，我们会给特定人员开放自定义组件能力，满足特色化需求。

  • 低门槛

标签更具语义化设计，对于简单的页面，UI、测试等没有代码基础的人员都可以完成编写。

  • 0 css代码

考虑到编写业务更多的使用者是后端人员，css对他们而言无疑是较难的点。由于一定的封闭性，CabinX无需编写css，且能保证体验统一且优美的界面。

  • 语义化标签

区别于Html原始标签，CabinX发明了一套自己的语义化标签，无开发经验的人通过标签语言就能明白代码所表述对的内容。

  • 多主题风格

目前支持国内和海外两种主题风格，且支持大中小三种尺寸。

提示

和三方不同，CabinX有自己设计的语义化标签，页面不支持使用原生的HTML标签。但可在开发自定义组件(SysComponent)时使用，使用需要向CabinX团队申请权限，详细请查看自定义组件。

兼容性​

  • 现代浏览器

一般推荐使用新版的Chorme浏览器。

EdgeChromeFirefoxSafariOperaIOS SafariChrome for Android
last 2 versions>=49>=99last 2 versionslast 2 versionslast 2 versionslast 2 versions

版本​

CabinX目前支持的版本如下表，但默认和最新的是跨端版本，跨端版本目前多端仅使用一个版本代码，后续会支持多版本能力，以减少开发人员心智负担和保障框架承载业务的稳定性。

版本名称说明
cabinx跨端版本，最新的，推荐使用。后续该版本会支持多个版本
pc历史Pc版本，不再更新，文档可查看CabinX PC
mobile历史mobile版本，不再更新，文档可查看CabinX MOBILE

版本判断方式​

  • 项目根目录中cabinconfig.js中配置了target。代码如下： target的取值请参考上述表格中对应版本说明。
module.exports = {
    buildConfig: {
        target: ['cabinx'],
        ...
    },
};
  • 未配置target，检查cabinx-cli版本

<=V0.8.3的脚手架版本默认target为pc，之后的脚手架版本默认target为cabinx跨端版本。

cabinx --version
提示

请检查cabinconfig.js是否配置target，没有请填写配置。

由于<=V0.8.3的脚手架版本默认target为pc，部门历史生成项目cabinconfig.js中未配置target，当脚手架升级版本大于V0.8.3后会使用跨端编译，此时对默认是pc的项目有影响。

研发如何使用文档？​

可按菜单顺序阅读，也可根据需要直接查看目标页面。

左侧菜单​

文档的左侧菜单按顺序展示了全部的文档菜单信息，主要有：

  • 最新动态：顾名思义，展示最新动态。
  • 贡献：关于如何成为CabinX的贡献者介绍。
  • 设计：CabinX设计相关，产品和UI使用较多。
  • 研发：研发必读，关于CabinX框架的能力介绍。
  • 组件：研发常用，组件的详细文档。
  • 图表：研发常用，Charts图表的详细文档。
  • API：研发常用，API的详细文档。
  • 模式
提示

其中研发，组件，图表和API部分是研发更关心的内容，建议详细阅读。

推荐浏览器​

为使用文档有更好的用户体验，建议您使用Chrome的新版浏览器。

头部区域​

头部区域包含的内容和功能有：

  • 高频使用菜单入口
  • 全局检索输入框
  • 主题，尺寸，语言切换
提示

CabinX支持国际化，多种尺寸和主题风格，在头部对应选项切换后可在各案例中查看效果。

必备技能​

尽管使用CabinX的框架门槛很低，但要实现更丰富的界面和高阶的功能，还是要求使用者对HTML、JavaScript和Vue 2有基本的了解，如果你还需要复习技能可查看以下资源：

帮助中心​

提示

CabinX只是您开发业务的使用工具，它的和业务不耦合，仅提供具有一定通用能力的组件或其他能力。非CabinX问题请联系相关负责人咨询。

我们整理了一份以CabinX、业务组件库和各商业版本为分类的文档，内容包含各自前端、UI和原生APP负责人，以及相关文档链接。详情请查看前端业务线文档入口。