又到一年年终,近来在做项目总计,抽了点时间,把商家产品做了布署,把组件整合为Vue
UI库(大家用Vue2+),于是造了个轮子,个中包涵 基础零部件 和 应用组件,方今组件 和 文书档案 在不断完善中。

github地址: xmui

品种示范:代码示例

“来点干货:怎么着依照vue2写一套UI库”种类打算分为n个部分:

  1. 环境安插

  2. 全部代码组织结构

  3. 起初首先个零件

  4. 讨论全局组件

  5. 编写API文档

  6. 打包公布


1. 环境安顿

第3,对于环境布署,作者使用官方的vue-cli,

大局安装 vue-cli

$ cnpm install -g vue-cli

开创四个基于 webpack 模板的新类型并安装信赖

$ vue init webpack xmui

$ cd xmui

$ npm install

$ npm run dev

好不不难迈开第二步,终于有温馨的库了 

接下去供给对webpack配置文件稍作一下调动,必要修改多少个地点:

package.config.js

那里的package不是组件目录,是npm run package:prod最后生成的缩小目录。

package.json的main配置是

,告诉node_modules查找引用的门道。

package.json的scripts配置是

,那里不多说,不懂能够留言哦。

  1. 全体代码组织结构

完整分为3块,大家把各组件都位于components目录内,样式放在styles,index.js作为入口文件。

先是components是为此的零部件集合,以button目录为例,

一般的组合便是.vue,.scss,.js二种档次文件,具体的达成在第一点初叶写第1个零件详细介绍。

再来看styles目录,应该从名字童鞋们能够看懂都以意味什么看头:),样式协会本人用的是BEM规范,一般分为reset,varibles(是各个复用变量,例如字体,背景颜色,按钮颜色之类的),icon(图标),mixin(方法函数),index为进口文件,最后会是那般:

最后看index.js入口文件

如此那般能够让组件扶助全局引入和按需引入。

  1. 初始首先个零件

抑或以button为例,在上一步提到过,有三种档次文件,在这么些组件里,考虑在类型应用中有三种状态:button
和 button group(按钮组),分别成立三个文本
button.vue,button-group.vue,button.scss 和 index.js。

先说button.vue的设计,

,既然是组件,就要考虑到可复用,可扩大,通过props传入分化参数和花色,来浮现不一样的按钮。组件调用是那样的:

再来看button-group.vue的设计,

,只是提供slot来按需插入,组件调用是那般的:

体制怎么写能够参考源码,这里小编用的是scss,你能够用less等,命名作者习惯用BEM的正统,假设不领会能够看那里 BEM

最后是index.js入口文件

是还是不是很简单?!三个零件就写完了

  1. 思维全局组件

咱俩在做项指标时候会用到很多的大局组件(例如:toast弹出层),这几个时候假设在每种文件里都先写这么的,鲜明不够geek,那里就以toast组件为例表达下,先贴图:

,大家清楚在vue2里

数据从父级组件传递给子组件,只可以单向绑定。子组件内部不可能一直改动从父级传递过来的数量。

一言以蔽之说,正是从父组件props传入isVisible属性,大家要用内部景观属性isActive来保证当前组件的景色操作,并且watch这一个isVisible属性操作

,最终经过emit把值再传出给父组件,形成三个单向数据流。

  1. 编写API文档

自小编用的是docsify,本人也是遵照vue写的,国人小说,用markdown来写api文书档案真舒服,汉语小清新,入门简单,可定制

,在根目录你会意识新增了docs目录,那其间都是md格式,那里贴出笔者的目录

,也足以看 xmui在线文书档案

  1. 装进公布

在初始第11中学对webpack做了调整,

历次开发测试完后,能够实施npm run
package会执行三步:打包更新package文件,生成dist演示网页,提交npm(供给注册绑定npm)。最后我们要这么给别人用

写在结尾:

写一套ui库其实并不复杂,但越来越多的是在盘算、尝试、调整,怎么着形成低耦合,可复用,易扩大,围绕你的观点,适用你的花色才是最好的产品。本身不是写文章的料,文笔糟糕,有畸形地点忘提议,多谢。

仰望有趣味的童鞋一起爱惜,恐怕您在利用时遇上标题,或许有好的提出,能够留言给本身和提 Issue 或 Pull
Request
,要不给个
Star 帮助下也行

相关文章

网站地图xml地图