解决问题:
- 一切皆组件:页面都是由组件组合而成,不存在没有组件的元素。
- 与应用模块开发完全解耦。
- 支持主题样式的切换:在应用中轻松做到主题的切换。
- 期望实现ui设计规范里的组件,连接前端开发与ui设计。
- 目前支持一些基础组件,业务组件暂不拉入该库。
- 组件之外的元素如何支持主题?一些slot的元素如何支持主题?(应该在项目中去支持或者选择不支持)
如何使用:
- 安装:
- npm i light-platform-ui-lib
- 全局引入:
- 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、组件使用:
- 参考组件每个使用。
如何参与组件库:
- 说明:
- 该组件库基于elementUI,主题样式、组件开发也都是参考elementUI。
- 组件库结构:
- components: 组件集合(lib)、样式集合(styles)、主题集合(themes)。
- dist: 打包文件。
- examples: 组件测试用例、demo。
- public: 组件依赖资源。
- 组件书写规范:
- 按照components中demo组件的规范,注意vue组件name属性值大写,其他均是小写。
- 组件install方法声明: 在src同级目录下的index.js文件中添加install方法。
- 样式书写:CSS 命名采用 BEM 的风格,[BEM风格请参考:getbem.com/introductio… 组件样式的顶层目录 .zq-card { }。
- 组件样式的导出声明:在styles文件夹下的index.scss 下声明组件样式。
- 组件主题样式支持:参考theme1、theme2.
-
打包发布: 目前发布到公共npm。后期发布到公司内部私有npm仓库。
-
怎么拆分组件: 组件分类: 通用类:不包含业务、api请求、vuex状态、路由信息等的复用性较强的组件。 (ui规范上的都可以成为组件库) 业务类:可以包含api请求、vuex状态、路由信息等的复用组件。