阿里云的管控类产品设计解决方案
Xconsole是一个来自阿里云的面向管控类产品的系统性解决方案，
诞生之初旨在为阿里云庞大的IAAS和PAAS产品控制台提供一站式的设计及研发解决方案
image.png
管控类产品设计解决方案

  1. 产品控制台接入流程
  2. 产品服务开发标准
  3. 产品服务能力目录等信息

image.png

Xconsole 场景 Scenes

http://xconsole.cloud/cloudbench/outerScenes
http://xconsole.cloud/cloudbench/outerComponent
将多数产品常用的场景页面梳理、优化成场景页面模板，产品UI设计可以从这里开始
image.png
image.png

xconsole是什么

后台管理控制台业务研发提供的解决方案
后台场景解决方案
xconsole介绍

http://www.mysecretrainbow.com/blog/14792.html
https://www.sohu.com/a/253018196_297161
https://mp.weixin.qq.com/s/WU_QRxDDyLCkejsSnJXqTg
https://www.xueui.cn/tutorials/background-interface/design-solutions-for-control-products.html

xconsole npm

https://www.npmjs.com/package/@alicloud/xconsole/v/2.2.16

  1. npm i @alicloud/xconsole@2.2.16

三步创建控制台项目

1 安装 nodejs & tnpm & def

  1. 下载 nodejs，已下载可以忽略 https://nodejs.org/en/download
  2. tnpm
    1. ali的内部 npm模块管理；DEF 的运行环境也需要 tnpm
  3. def -v
  4. image.png ```bash brew install node node -v

尽量安装最新版本的

npm install -g tnpm —registry=http://registry.npm.alibaba-inc.com

tnpm i -g @ali/def def -v # 查看版本

  3. <a name="TM5uG"></a>
  4. ### 2 创建项目
  6. 1. @ali/xconsole 项目脚手架 init初始化项目
  7. 2. 命令行对话框，不需要 mock项目
  8.    1. [https://developer.aliyun.com/mirror/npm/package/@alicloud/xconsole](https://developer.aliyun.com/mirror/npm/package/@alicloud/xconsole)
  9. ```bash
  10. tnpx @ali/xconsole init
  12. tnpm run start
  13. # 指定端口端口启动服务
  14. tnpm run start -- --port 3333

3 tnpm run start

  1. 本地运行项目 http://localhost:3333
  2. 浏览器中访问 http://localhost:3333，看到后台界面，ok，运行成功