高教组件库组件库(light-platform-ui-lib)介绍

142 阅读2分钟

解决问题:

  1. 一切皆组件:页面都是由组件组合而成,不存在没有组件的元素。
  2. 与应用模块开发完全解耦。
  3. 支持主题样式的切换:在应用中轻松做到主题的切换。
  4. 期望实现ui设计规范里的组件,连接前端开发与ui设计。
  5. 目前支持一些基础组件,业务组件暂不拉入该库。
  6. 组件之外的元素如何支持主题?一些slot的元素如何支持主题?(应该在项目中去支持或者选择不支持)

如何使用:

  1. 安装:
  • npm i light-platform-ui-lib
  1. 全局引入:
  • import UI from 'light-platform-ui-lib'
  • Vue.use(UI);

3、样式引入: 默认提供一套主题.

  • import 'light-platform-ui-lib/dist/css/index.css';

4、其他主题样式:

  • import 'light-platform-ui-lib/dist/css/theme1/index.css';
  • import 'light-platform-ui-lib/dist/css/theme2/index.css';

5、组件使用:

  • 参考组件每个使用。

如何参与组件库:

  1. 说明:
  • 该组件库基于elementUI,主题样式、组件开发也都是参考elementUI。
  1. 组件库结构:
  • components: 组件集合(lib)、样式集合(styles)、主题集合(themes)。
  • dist: 打包文件。
  • examples: 组件测试用例、demo。
  • public: 组件依赖资源。
  1. 组件书写规范:
  • 按照components中demo组件的规范,注意vue组件name属性值大写,其他均是小写。
  • 组件install方法声明: 在src同级目录下的index.js文件中添加install方法。
  • 样式书写:CSS 命名采用 BEM 的风格,[BEM风格请参考:getbem.com/introductio… 组件样式的顶层目录 .zq-card { }。
  • 组件样式的导出声明:在styles文件夹下的index.scss 下声明组件样式。
  • 组件主题样式支持:参考theme1、theme2.
  1. 打包发布: 目前发布到公共npm。后期发布到公司内部私有npm仓库。

  2. 怎么拆分组件: 组件分类: 通用类:不包含业务、api请求、vuex状态、路由信息等的复用性较强的组件。 (ui规范上的都可以成为组件库) 业务类:可以包含api请求、vuex状态、路由信息等的复用组件。