造个自己的Vue的UI组件库类似Element

原创 jike 教程 vue 60阅读 16 天前 举报

前言

随着前端的三大框架的出现,组件化的思想越来越流行,出现许多组件库.它能够帮助开发者节省时间提高效率,<br>
如React的Ant-design,Vue的iView,Element等,它们的功能已经很完善了.我写这遍文章的目的:记录自己搭建UI库的过程(对Vue的理解加深了好多)演示地址<br>
首先讲一下思路:
平常写组件时,写一个组件要用时直接导入就行了,如你写了一个time.vue,用的时候

现在要写一个组件库,是不是把所有组件一个文件夹里(如button.vue,icon.vue,input.vue...),通过Vue.components注册所有组件,再通过Vue.use()安装一下就实现了
这就是所以的vue插件的思路,没有那么神秘

1.环境准备

前面说要把所有的组件放在一个文件夹里,最简单就是用脚手架搭一个项目目录结构,同时还需要添加示例文档----方便调试和展示:<br>
按钮的示例效果


现在要考虑比较重要的两点:目录结构示例文档<br>
1.目录结构
直接用vue-cli建立项目结构, 在基础上修改一下就行了(以满足我们示例的展示)<br>
目录结构

以上是已经修改过的目录结构,将脚手架生成的src目录改为examples用来放示例文档,所以相应的你要修改build目录下的webpack.base.conf.js ,
让它指向examples,webpack才能正确进行打包

  1. 示例文档
    编写文档使用markdown最适合了,要让vue能够实现markdown文档可以用vue-markdown-loader,配置相关文件
    在webpack.base.conf.js 的rules里添加


就可以开始写文档,测试一下

npm run dev 跑项目打开http://localhost:8080/#/hello, 可以显示,初步成功(基本实现)
接下来就要实现示例文档的效果: 既能演示又有代码展示(如下图)

如上图示例文档是button.md要让它在button.md一个文件里想显示代码的地方显示代码,想显示按钮的地方显示按钮,所以就要在显示按钮的地方打上一个标识符,

让编译过程中能够识别,安装.vue的方式编译展示
还是要用到markdown的配置,它其实封装了markdown-it,支持options选项,只要加上定义的标识符(我用的是'demo'),options 选项的配置(也在webpack.base.conf.js 里)

其实这就是把要当解析器遇到带demo的标识符时就会添加我们准备好的demo-block组件,按照以上规则解析成AST(抽象语法树),再把它编译成html
所以写示例文档时,可以这样写

2.如何编写组件源码

其实没有想象中那么难,就像平常写组件那样,只不过要按照一定结构编写(具体的可以去看我的github),一般的UI组件库都支持全局引入和单个组件引入,
全局引入:

遍历你写的组件,通过Vue.component注册到Vue上,构成一个install函数,暴露install,当你的别的项目要用时只要安装一下包,用Vue.use()使用(像别的插件一样)
单个文件引入:

类似的只要暴露出组件就OK了

别人要能够通过npm安装包用我们的包,我们是不是要在包里写所以组件和样式,别人只要npm安装包和引入一个全部组件的样式两步骤就可以使用了

3. npm发布你的UI框架

  1. 你要拥有一个npm账号(没有的直接去官网注册一个)
  2. 打开终端登录npm

3.发布包
我们只有发布packages这个文件夹就行,写好packages文件夹下个的package.json

使用npm publish发布就OK了,别人就可以用npm install jk-ui --save愉快的玩耍了
具体的可以去看源码,在github上,觉得可以的话帮忙star一下

评论 ( 0 )
最新评论
暂无评论

赶紧努力消灭 0 回复