提示
在开始之前,假设你已经比较了解Html、JavaScript并具备Vue的基础知识。这些知识可以帮助你更好地理解和使用框架来开发需求。
简介
Cabin X 是 DMALL 的企业级设计系统,用于构建体验一致的B端零售产品,助力企业提高经营效率,改善消费者体验。
整套系统以 Essence 本质 设计语言为基础,由前端代码、设计工具、人机界面指南以及内部贡献者组成。
环境要求
- 脚手架:cabinx-cli,具体文档可查看CLI 脚手架
- Node版本:推荐V14 - V16,不同脚手架版本依赖Node版本不一,详细请查看CLI 脚手架的环境说明。建议安装nvm等Node版本管理器,方便切换不同Node版本。
环境安装
1. 安装 Node.js
推荐V14 - V16
你可以点击链接直接下载 Windows、MacOS,还可以访问 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,也可自己手动浏览器输入该地址打开。
预览
步骤如下:
- 基础信息部分选择PC端或移动端
- 打开页面部分选择预览的页面
- 点击调试,在弹出的pop框中点击打开查看,或通过对应APP扫码查看。
🎉 Congratulations!如果你到这里了,意味着你可以开始开始研发你的第一个 CabinX 项目了。