跳到主要内容
快速上手
欢迎来到 Cabin X,如果你刚开始使用 Cabin X 进行开发,这里有一份指引清单,让你快速开始创建CabinX项目。
提示

在开始之前,假设你已经比较了解Html、JavaScript并具备Vue的基础知识。这些知识可以帮助你更好地理解和使用框架来开发需求。

简介

Cabin X 是 DMALL 的企业级设计系统,用于构建体验一致的B端零售产品,助力企业提高经营效率,改善消费者体验。

整套系统以 Essence 本质 设计语言为基础,由前端代码、设计工具、人机界面指南以及内部贡献者组成。

环境要求

  • 脚手架:cabinx-cli,具体文档可查看CLI 脚手架
  • Node版本:推荐V14 - V16,不同脚手架版本依赖Node版本不一,详细请查看CLI 脚手架的环境说明。建议安装nvm等Node版本管理器,方便切换不同Node版本。

环境安装

1. 安装 Node.js

推荐V14 - V16

你可以点击链接直接下载 WindowsMacOS,还可以访问 Node.js官网 查看 全部版本

2. 设置公司源

请设置为 DMALL 源(注意根据公司要求,脚手架等资源将统一发布到公司npm源),详见 多点 Nexus NPM 管理规范

yarn 安装方式

使用yarn请先执行以下命令安装yarn。

npm install yarn -g

npm和yarn设置源方式分别如下

npm config set registry http://nexus.dmall.com:8081/nexus/repository/npm-public/
yarn config set registry http://nexus.dmall.com:8081/nexus/repository/npm-public/

3.安装脚手架

npm install cabinx-cli -g 或 yarn cabinx-cli -g

初始项目

1. 运行创建命令

cabinx init

2. 完成工具提示引导

> cabinx init
? 请选择你要创建的cabinx项目类型 cabinx跨端(编写一套代码运行在pc,mobile,osapp
? 请输入项目的名称,名称可以使用字母,数字,下划线 my_demo
? http端口号 40100
? https端口号 40102
|-info [2023-02-26 13:28:19]:项目创建完成
info [2023-02-26 13:28:19]:启动服务: cd my_demo && cabinx dev
info [2023-02-26 13:28:19]:打包:cd my_demo && cabinx build
注意
  • Windows 用户如果使用 gitbash 操作箭头无效果,可更换 cmd 尝试。
  • 项目名称不能使用‘-’中横线。

启动项目

执行启动命令

你可以进到你的项目目录里,执行 cabinx dev 命令开始启动项目。

cd my_demo
cabinx dev

查看调试界面

执行启动命令成功后将启动本地Node服务,并自动打开调试界面,调试界面地址如下图中提示的server devManager url,也可自己手动浏览器输入该地址打开。 启动图

预览

步骤如下:

  1. 基础信息部分选择PC端或移动端
  2. 打开页面部分选择预览的页面
  3. 点击调试,在弹出的pop框中点击打开查看,或通过对应APP扫码查看。

调试页面

🎉 Congratulations!如果你到这里了,意味着你可以开始开始研发你的第一个 CabinX 项目了。