前言
如何做一个vuejs UI 组件库？最近也是手痒没事找事做，而后就突发奇想照着葫芦画瓢模拟（站在伟人的肩膀上抄），本人也来总结并记录一下这个构建的过程
前提
- 你至多得用会 vue
- 简略的封装过一些组件
- 会吹牛
- 会给我点个赞
好了就这四点，足矣
创立一个vue的我的项目
如果你感觉 vue-cli 不太合乎你的需要，也能够自行创立
咱们这里就间接应用 vue-cli啦
// 创立一个 clivue create laoyan-ui手动抉择配置
抉择 babel 和 css 预处理器就好了
抉择node-sass
抉择package.json
是不是感觉回到了当初学 vue 的时光？对！就是纯手摸手的教学
好了废话不多说，创立好了，一起来造作吧
批改文件名称
好，咱们进入到刚刚创立的我的项目目录中后，先不焦急启动我的项目，咱们要学会先布局大橘，再付出口头
新建 packages
新建一个寄存组件的文件夹 packages ，前面咱们大部分组件开发工作也是在这外面进行的
批改 src
再将 src 文件夹改成 examples ，examples 咱们用来做测试应用
新建 vue.config.js
module.exports = { pages: { index: { // 批改入口 entry: 'examples/main.js', template: 'public/index.html', filename: 'index.html' } }, chainWebpack: config => { config.module .rule('js') .include .add('/packages') .end() .use('babel') .loader('babel-loader') .tap(options => { return options }) }}清理不须要的内容
将 examples/assets 外面的logo.png 删除
将 examples 的 components目录删除
将 examples 的 App.vue 删除成上面这样
<template> <div id="app"> app.vue </div></template><script>export default { name: 'App',}</script>目录构造截图
启动我的项目
yarn serve启动实现，关上浏览器
到这里，你就曾经差不多做完了组件库的后期筹备性工作
开始干活
咱们所有的组件放在 packages 目录下，那么目录构造必定是长这样
|packages|--- aComponent|--- bComponent|--- cComponent那么咱们须要一个 index.js 文件用于引入这些组件，而后再去裸露
哎～ 先不论这 index.js 咱们先轻易写一个组件(一看就会的组件—文本链接)，保障能够失常应用组件先
写一个文本链接
咱们暂且称之为 ly-link
|packages|--- lyLink|---|--- src|---|---|--- index.vue将 index.vue 写成这鸟样
<template> <!-- 用传过来 href 进行跳转 --> <!-- 用传过来的 type 批改色彩 --> <a :href="href || undefined" :class="[`ly-link-${type}`]" > <!-- 应用默认插槽来填充文本 --> <slot/> </a></template><script> export default { // 等下 index.js 外面要用到 name:"lyLink", props: { // 限度类型 href: String, type: { type: String, default: 'default' } } }</script><style lang="scss" scoped> // 定义链接字体色彩 .ly-link-default { color: #606266; } .ly-link-primary { color: #409eff; }</style>组件写完了，而后咱们在examples/App.vue 中测试一下
<template> <div id="app"> <!-- 应用组件 传入type --> <ly-link type="primary"> 老严 link </ly-link> </div></template><script>// 引入组件import lyLink from '../packages/lyLink/src'export default { name: 'App', // 注册组件 components: { lyLink }}</script>看看成果
看起来没啥故障，然而咱们认真一品，这不对呀，咱们应该是要入口文件main中全局引入的呀
创立index.js
好，那咱们回到刚刚说的 index.js 中来，咱们通过index.js 作为裸露组件的 js
// 引入组件import lyLink from './lyLink/src'// 寄存组件的数组const components = [ lyLink]// 定义 install 办法，接管 Vue 作为参数。const install = function (Vue) { // 判断是否装置 if (install.installed) return // 遍历 components 数组，来进行全局注册 components.map(component => { Vue.component(component.name, component) })}export default { // 导出的对象必须具备 install，能力被 Vue.use() 办法装置 install, lyLink}而后我门来到 main.js 中,引入咱们刚刚写的index.js 文件
import Vue from 'vue'// 引入index.jsimport laoyanUi from '../packages';Vue.use(laoyanUi)再把 App.vue 中的引入和注册组件删除
<template> <div id="app"> <ly-link type="primary"> 老严 test </ly-link> </div></template><script>export default { name: 'App'}</script>这样还是没问题的对吧！
那么需要来了，用户当初须要按需引入组件，怎么做？
什么按需引入，给我打!
按需引入
好，咱们来到了按需引入这个环节
咱们平时用多了市面上的 UI组件库，会发现个别都会有个按需引入
比方 element-ui
import { Button, Select } from 'element-ui'那么该如何达到按需引入的成果呢？
在对应的组件文件夹中，再写上一个 index.js
// 引入组件import lyLink from './src';// 提供 install 装置办法，供按需引入lyLink.install = function (Vue) { // 注册组件 Vue.component(lyLink.name, lyLink)}// 裸露组件export default lyLink此时你的 packages 应该长这样
而后咱们再去到里面 packages\index.js
将引入的vue文件改为引入index.js,再默认裸露 install
// 引入刚刚写的组件内的index.js+ import lyLink from './lyLink'const components = [ lyLink]// 定义 install 办法，接管 Vue 作为参数。如果应用 use 注册插件，则所有的组件都将被注册const install = function (Vue,opt = {}) { // 判断是否装置 if (install.installed) return // 遍历注册全局组件 components.map(component => { Vue.component(component.name, component) })}+ export default install+ export { // 导出的对象必须具备 install，能力被 Vue.use() 办法装置 install, // 以下是具体的组件列表 lyLink}按需引入试试吧
import { lyLink } from '../packages';Vue.use(lyLink)成果也是能够的
cdn 引入
咱们每次做我的项目优化的时候都有一个 cdn 优化，那么这个cdn引入，咱们改怎么配置呢？
import lyLink from './lyLink' const components = [ lyLink ] // 定义 install 办法，接管 Vue 作为参数。如果应用 use 注册插件，则所有的组件都将被注册 const install = function (Vue,opt = {}) { // 判断是否装置 if (install.installed) return // 遍历注册全局组件 components.map(component => { Vue.component(component.name, component) }) }+ // 判断是否是间接引入文件+ if (typeof window !== 'undefined' && window.Vue) {+ install(window.Vue)+ } export default install export { // 导出的对象必须具备 install，能力被 Vue.use() 办法装置 install, // 以下是具体的组件列表 lyLink }多加这一层判断即可，严老湿咱们怎么上传cdn呐？咱们在前面会讲这个如何应用
打包组件库
怎么打包？yarn build? 那不是打包我的项目了嘛
咱们须要在 package.json 中加上一条新的命令
"scripts": { "serve": "vue-cli-service serve", "build": "vue-cli-service build",+ "lib": "vue-cli-service build --target lib --name index --dest lib packages/index.js"},执行打包
这条命令会将咱们的组件的打包到一个 lib 的文件夹中
yarn lib打包实现之后咱们试试引入lib文件夹中的组件
试试成果
在main.js中引入
import Vue from 'vue'import App from './App.vue'import { lyLink } from '../lib/index.umd.min.js';Vue.use(lyLink)Vue.config.productionTip = falsenew Vue({ render: h => h(App),}).$mount('#app')启动我的项目
yarn serve咱们曾经胜利解析了组件。然而发现了一个问题，咱们如同没有款式
因为咱们还没有引入款式
import Vue from 'vue' import App from './App.vue' import { lyLink } from '../lib/index.umd.min.js';+ import '../lib/index.css' Vue.use(lyLink) Vue.config.productionTip = false new Vue({ render: h => h(App), }).$mount('#app')这下算是实现了吧，那咱们应该要公布组件了吧？
不然咱们怎么提供给他人应用呢，个别就是上传 npmjs
公布组件
公布组件咱们个别会公布到npm上,而后就能够通过 yarn 或者 cnpm 下载了
创立.npmignore
然而咱们须要创立一个.npmignore 文件来疏忽上传一部分文件， 比方测试文件examples,咱们没必要上传,这样会减少包的体积
# 疏忽目录examples/packages/public/dist/common/# 疏忽指定文件vue.config.jsbabel.config.js*.map好了咱们接下来能够进行上传npm包了
登陆npm
npm login咱们登陆胜利了！那么接下来
公布包
公布包之前你还须要做一件事件
将你的package.json中的 private 改为 false ，这个是用来示意这个包是否为公有的
- "private": true,+ "private": false,批改入口文件为lib上面的js，不然到时候下载依赖找不到你的组件
"main": "lib/index.umd.min.js",执行公布
npm publish公布包有很多疑难杂症，心愿你能够顺利百度谷歌到，这里我就不一一阐明了
装置依赖
你能够从新创立一个 vue-cli 来下载你的依赖包
yarn add laoyan-ui引入
下载实现之后,在main.js中引入
import { lyLink } from 'laoyan-ui'import 'laoyan-ui/lib/index.css'Vue.use(lyLink)成果
轻易找个页面测试一下吧
<ly-link type="primary" href="//lovemysoul.vip/votre-dieu">test link</ly-link>到这里咱们就曾经实现了UI组件库的大部分流程
然而咱们之前说的 cdn 引入呢？
cdn 应用
咱们间接新建一个 index.html，这个 https://unpkg.com 你就能够了解为 npm 自带的cdn
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>test laoyan-ui</title> <!-- 引入vue --> <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.5.6/vue.min.js"></script> <!-- 引入 laoyan-ui 的组件--> <script src="https://unpkg.com/laoyan-ui/lib/index.umd.min.js"></script> <!-- 引入 laoyan-ui 的款式 --> <link rel="stylesheet" href="https://unpkg.com/laoyan-ui/lib/index.css"></head><body> <div id="app"> <ly-link type="primary"> test laoyan-ui </ly-link> </div> <script> let vm = new Vue({ el:"#app" }) </script></body></html>留神： 生产环境，举荐在引入cdn时加上版本号 如： //unpkg.com/laoyan-ui@0.1.0@0.1.0 就是锁定版本号，这样能够锁定你引入的版本，保障稳定性最初
咱们的明天的课程就到这里，当初将近凌晨一点钟，该睡觉了
如果你感觉这篇文章讲得还算不错，能够给我点个赞哈哈，收割一波
如果本篇文章有什么谬误，请您大胆提出，老严也会及时批改
最近在做的 GitHub 我的项目地址是 ：https://github.com/votre-dieu...
欢送PR、Star、Fock
代码地址
如果你要咱们刚刚一起写的这个代码，能够点击下方链接百度云盘进行下载
链接: https://pan.baidu.com/s/1puYN...
明码: 4n6v