uxkit-test

一套为几米开发者准备的基于Element的UI组件库以及SDK工具包

Usage no npm install needed!

<script type="module">
  import uxkitTest from 'https://cdn.skypack.dev/uxkit-test';
</script>

README

几米UI组件 jimi-uxkit

一套为几米开发者准备的基于Element的UI组件库以及SDK工具包

注意事项

1. 如发现Eslint格式验证错误,请改正之后进行提交!!!

2. 请先合并完成之后,启动服务进行验证,再push到线上地址!!!

3. 提交到本地仓库时请详细写明本次提交修改功能!!!

Build Setup

#### install dependencies
npm install

#### serve with hot reload at localhost:8099
npm run dev

#### build for production with minification
npm run build

项目说明

关于框架

关于设计

  • 低耦合,组件、样式、js三者完全分离。
  • 高复用,每一个组件,类,sdk都单独存在。
  • 集中统一管理,以模块为单位进行封装。
  • 持续优化集成,版本升级可控。
  • 提供开发效率,降低开发成本。

关于样式

所有样式作为独立的模块存在,样式中又分为公共样式,主题样式,基础样式,组件样式。
样式层级关系:基础样式->主题样式->公共样式->组件样式。
基础样式:重制浏览器默认样式,将所有游览器标准达到统一。
主题样式:定义通用样式。
公共样式:定义公共类。
组件样式:每个组件的类,其中包括该组件的共有样式。

关于组件

每一个简单组件,复合组件都应该作为一个独立模块存在,可以和ux-kit组件分发中心交互,但不可和并列的组件交互。
组件采用无样式设计,所有样式进行抽离,由样式分发中心(styles.scss)进行分发。
组件props必须声明类型,必须声明拥有default参数。
组件向外输出三种类型:props,function,event。
props为接受的数据
function为向外输出的函数
event为触发的事件

关于语言

所有文字语言分发中心,将语言转换成对应的code之后进行显示。
语言中心同时也需要提供方法,以及接受属性。国际化内容在默认情况下不进行开启。

关于SDK

uxsdk集成组件项目或非组件项目中所有的共有类。所有共有js将通过uxsdk集成、输出和引用。
uxsdk中接受数据返回数据,只对数据进行处理,不对逻辑进行处理。

关于开发规范

  • 组件
  1. props必须声明类型。
  2. 在大部分情况下,props拥有默认参数。
  3. props不得在内部修改。
  4. 在大部分情况下,组件拥有solt。
  5. event在大部分情况下一次操作只触发一次。
  6. event接受参数需声明数据类型。
  7. event必须进行响应。
  8. components中不可以出现行内样式。
  9. 组件通过js导出。
  10. 组件命名以ux-开头。例:ux-button。
  • 样式
  1. 基础样式表一般情况下不得进行修改。
  2. 除主题类外,禁用!important.
  3. 禁用id选择器。
  4. 主题样式表提供样式对应的key,不提供class。
  5. 公共样式表提供公class。
  6. componetns样式表对应某一个组件包(包括组件包中所有组件)样式。
  7. 基础样式表使用标签选择器。
  8. 公共样式表以ux-utils为开头命名。例:ux-utils-clear-fix。
  9. components样式表以ux开头为命名。例:ux-button。
  10. 类名不可重复。
  • SDK
  1. sdk不归属于某一个组件。
  2. sdk需返回数据。
  3. sdk不得修改js数据类型的原型方法。
  4. sdk以的方法和属性都直接存在在uxsdk对象或原型中。

关于目录

├─ doc 开发设计文档
├─ eff 原型&效果图
├─ req 项目需求文件
└─ src 项目源码
   ├─ build // 打包配置
   ├─ config // 项目配置
   ├─ examples 文档系统
   ├─ ├─ components // 文档组件
   │  ├─ demo-styles // 文档样式
   │  ├─ docs // md文档
   │  └─ lib // js文件
   │  └─ router // 路由
   ├─ packages // 组件
   │  ├─ components // 组件单元
   │  ├─ language // 语言系统
   │  ├─ styles // 组件样式
   │  └─ uxsdk // SDK
   ├─ script // 一些js工具
   ├─ static // 静态资源库不进行打包
   ├─ test // 单元测试