前⾔
随着前端的三⼤框架的出现，组件化的思想越来越流⾏，出现许多组件库.它能够帮助开发者节省时间提⾼效率, 如React的Ant-design,Vue的iView,Element等，它们的功能已经很完善了.
我写这遍⽂章的⽬的：记录⾃⼰搭建UI库的过程(对Vue的理解加深了好多)
赵腾达⾸先讲⼀下思路:
平常写组件时，写⼀个组件要⽤时直接导⼊就⾏了，如你写了⼀个time.vue,⽤的时候
import time from '路径'
现在要写⼀个组件库，是不是把所有组件⼀个⽂件夹⾥(如button.vue,icon.vue,)，通过Vueponents注册所有组件，再通过Vue.use()安装⼀下就实现了，这就是所以的vue插件的思路，没有那么神秘
1.环境准备
前⾯说要把所有的组件放在⼀个⽂件夹⾥，最简单就是⽤脚⼿架搭⼀个项⽬⽬录结构,
同时还需要添加⽰例⽂档----⽅便调试和展⽰:
nc患者按钮的⽰例效果
现在要考虑⽐较重要的两点:⽬录结构和⽰例⽂档
1.⽬录结构
直接⽤vue-cli建⽴项⽬结构, 在基础上修改⼀下就⾏了(以满⾜我们⽰例的展⽰)
⽬录结构
.
├── build -------------------------webpack相关配置⽂件 │├── build.js
│├── check-versions.js
│├── logo.png
│├── strip-tags.js
│├── utils.js
│├── f.js
│├── f.js -------配置markdown设置时会⽤到它
│├── f.js
│└── f.js
├── config ------------------------vue的基本配置
│├── v.js
│├── index.js
│└── v.js
├── examples -----------------------放置例⼦
│├── App.vue --------------------根⽂件
│├── assets ---------------------静态资源
││├── css --------------------css
││├── img --------------------图⽚
││└── logo.png ---------------vue的logo
│├── components -----------------公共组件
││├── demo-block.vue ---------盒⼦组件
││├── footer.vue -------------footer组件蟛蜞菊内酯
││├── header.vue -------------header组件
││└── side-nav.vue -----------侧边栏组件
│├── docs -----------------------例⼦模块的⽂档
││├── breadcrumb.md ----------⾯包屑组件⽂档
││├── button.md --------------按钮组件⽂档
││├── card.md ----------------卡⽚组件⽂档
││├── guide.md ---------------简介⽂档
││├── icon.md ----------------图标⽂档
钒矿││├── install.md -------------安装⽂档
││├── layout.md --------------布局⽂档
││├── logs.md ----------------更新⽇志⽂档
││├── message.md -------------消息⽂档
││├── start.md ---------------快速开始1⽂档
││├── tag.md -----------------标签⽂档
││└── twotable.md ------------⼆维表格⽂档
│├── icon.json ------------------图标数据
桶装水管理系统│├── main.js --------------------⼊⼝⽂件
│├── fig.json ------------侧边栏数据
│└── router ---------------------路由
│└── index.js ---------------路由配置
├── packages -----------------------组件库源代码
│├── README.md ------------------README
│├── breadcrumb -----------------⾯包屑源码
││├── index.js
││└── src
│├── breadcrumb-item ------------⾯包屑源码
││└── index.js
│├── button ---------------------按钮源码
││├── index.js
││└── src
│├── card -----------------------卡⽚源码
││├── index.js
││└── src
│├── col ------------------------列布局源码
││├── index.js
││└── src
│├── message --------------------消息源码
││├── index.js
││└── src
│├── two-dimensional-table -----⼆维表格源码
││├── index.js
││└── src
│├── row -----------------------⾏源码
││├── index.js
││└── src
│├── tag -----------------------标签源码
││├── index.js
││└── src
│├── theme-default --------------样式表
││└── lib
│├── package.json
│└── index.js -------------------组件库⼊⼝
├── index.html ---------------------主页
├── package.json
├── static
└── README.md
以上是已经修改过的⽬录结构，将脚⼿架⽣成的src⽬录改为examples⽤来放⽰例⽂档，所以相应的你要修改build⽬录下的
f.js ，让它指向examples,webpack才能正确进⾏打包
⽰例⽂档，编写⽂档使⽤markdown最适合了，要让vue能够实现markdown⽂档可以⽤，配置相关⽂件在f.js 的rules⾥添加
就可以开始写⽂档，测试⼀下
{
path: '/hello',
name: 'hello',
component: r => sure([], () => r(require('../docs/hello.md')))
}
npm run dev 跑项⽬打开:8080/#/hello, 可以显⽰，初步成功(基本实现)
接下来就要实现⽰例⽂档的效果: 既能演⽰⼜有代码展⽰(如下图)
如上图的⽰例⽂档是button.md, 要让它在button.md⼀个⽂件⾥想显⽰代码的地⽅显⽰代码，想显⽰按钮的地⽅显⽰按钮，所以就要在显⽰按钮的地⽅打上⼀个标识符,
让编译过程中能够识别，安装.vue的⽅式编译展⽰还是要⽤到markdown的配置，它其实封装了,⽀持options选项，只要加上定义的标识符(我⽤的是'demo'),options 选项的配置(也在f.js ⾥)
const vueMarkdown = {
preprocess: (MarkdownIt, source) => {
return '<table class="table">'
}
const code_inline = de_inline
args[0][args[1]].attrJoin('class', 'code_inline')
return code_inline(...args)
}
return source
},
use: [
[MarkdownItContainer, 'demo', {
// ⽤于校验包含demo的代码块
validate: params => im().match(/^demo\s*(.*)$/),
render: function (tokens, idx) {
var m = tokens[idx].im().match(/^demo\s*(.*)$/);
if (tokens[idx].nesting === 1) {
var desc = tokens[idx + 2].content;
// 编译成html
const html = vertHtml(striptags(tokens[idx + 1].content, 'script'))
// 移除描述，防⽌被添加到代码块
tokens[idx + 2].children = [];
return `<demo-block>
<div slot="desc">${html}</div>小米松果芯片发布会
<div slot="highlight">`;
}
return '</div></demo-block>\n';
}
}]
]
}
其实这就是把要当解析器遇到带demo的标识符时就会添加我们准备好的demo-block组件，按照以上规则解析成AST(抽象语法树)，再把它编译成html
所以写⽰例⽂档时，可以这样写
2.如何编写组件源码
其实没有想象中那么难，就像平常写组件那样，只不过要按照⼀定结构编写(具体的可以去看我的),⼀般的UI组件库都⽀持全局引⼊和单个组件引⼊,
全局引⼊:
const install = function(Vue) {
if(install.installed) return
components.map(component => Vueponent(component.name, component))
}
遍历你写的组件，通过Vueponent注册到Vue上，构成⼀个install函数，暴露install，当你的别的项⽬要⽤时只要安装⼀下包,⽤Vue.use()使⽤(像别的插件⼀样)
单个⽂件引⼊:
export default {
install,
JButton,
JCol,
JRow,
JTag,
JBreadcrumb,
JBreadcrumbItem,
JCard,
towTable
}
类似的只要暴露出组件就OK了
别⼈要能够通过npm安装包⽤我们的包，我们是不是要在包⾥写所以组件和样式，别⼈只要npm安装包和引⼊⼀个全部组件的样式两步骤就可以使⽤了
3. npm发布你的UI框架
1. 你要拥有⼀个npm账号(没有的直接去官⽹注册⼀个)
2. 打开终端登录npm
npm login
3.发布包
我们只有发布packages这个⽂件夹就⾏，写好packages⽂件夹下个的package.json
{
"name": "jk-ui",
"version": "1.0.9",
"description": "UI base on Vue",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"repository": {
"type": "git",
"url": "git+ssh://git@github/liuyangjike/JKUI.git"
},
"keywords": [
"UI"
],
"author": "Jike",
"license": "ISC",
"bugs": {
"url": "github/liuyangjike/JKUI/issues"
},
"homepage": "github/liuyangjike/JKUI#readme"
}
使⽤npm publish发布就OK了，别⼈就可以⽤npm install jk-ui --save愉快的玩耍了具体的可以去看源码，在上，觉得可以的话帮忙star⼀下
豫公网安备41160202000603
站长QQ:729038198
关于我们
投诉建议