前端组件库实现原理

前言
- Demo地址
一. 组件库开发流程
- 1）新建vue项目：
- 2）编写自定义组件，封装成插件：
- 3）修改配置项
- - webpack.config.js：
  - pakage.json：
- 4）发布到npm
二. 安装使用自己的插件
三. 自定义组件API文档
- Button按钮组件
- Modal对话框组件
四. 引用效果展示

前言

对Vue组件开发有一定了解，对UI组件库的实现比较感兴趣，想要理解其开发原理，这篇文章可以帮助你实现并发布自己的第一个自定义插件。

Demo地址

建议将demo拉取至本地，结合代码更容易理解：
git地址：https://github.com/Yuwenbinjie/ywbj-ui.git

git clone git@github.com:Yuwenbinjie/ywbj-ui.git
cd ywbj-ui/
npm i
npm run dev

一. 组件库开发流程

1）新建vue项目：

文件目录如下图

.
├── dist # 压缩后文件目录
├── site # 项目结构目录
│   ├── App.vue # 单页应用父组件
│   └── main.js # 单页应用启动入口文件
├── src # 开发目录
│   ├── assets # 静态文件：scss/image
│   ├── components # 存放公共组件库
│   ├── index.js # 全局注册组件插件
│   └── style.js # 导入scss
├── index.html
├── package.json # 依赖管理
├── webpack.dev.js #项目启动配置文件：npm run dev
├── webpack.config.js #项目打包配置文件：npm run build
└── README.md #README

2）编写自定义组件，封装成插件：

业务组件和功能组件的主要区别

slot插槽占位符，可以实现父子组件传参，父组件templet模版可将子组件slot内容替换。当slot未命名时将父组件全部替换，当定义name时，可以实现父组件对子组件的指定位置显示内容或传参；

<div :class="preCls+'-title'" v-show="showTitle"><slot name="modal-title">自定义标题</slot>
</div>
<div :class="preCls+'-body'" v-show="showBody"><slot name="modal-body">自定义内容</slot>
</div>

定义多个className时，可以将其class作为属性放入对象中，根据是否传入props参数进行判断；

classBtn() {let {preCls, type, size, shape} = thislet className = [`${preCls}`,{[`${preCls}-${type}`]: !!type,[`${preCls}-${size}`]: !!size,[`${preCls}-${shape}`]: !!shape,},]return className
}

props自定义验证，当没有遵循传入规则时需要对其进行一个预先检查，validator可以通过自定义函数对传入的参数进行校验；

type: {type: String,default: 'default',//['default',success', 'warning', 'error', 'info']validator(value) {let types = ['default','success', 'warning', 'error', 'info']return types.includes(value) || !value}
},

在src/index.js来封装组件，该文件即是webpack配置的入口文件，install是挂载组件的方法，有了它就可以在外部引用并Vue.use一个插件了；

import * as components from './components'
var VuePlugin = {}
VuePlugin.install = function(Vue, options) {for(let component in components) {Vue.component('yw'+component, components[component]);}
}
export default VuePlugin

此时，你已经在本地成功创建好了一个组件库插件，在本地main.js中引入插件和css文件import '@/assets/index.scss'， import YwVue from '@'并注册使用Vue.use(YwVue)即可在项目中查看自定义的组件效果。以下步骤将你的插件打包并发布到npm：

3）修改配置项

webpack.config.js：

将src中的index作为入口文件，出口文件(yw.js)必须与pakage.json中的main相同；

 entry: {style: './src/style.js',yw: './src/index.js',},output: {path: path.resolve(__dirname, './dist'),publicPath: '/dist/',filename: '[name].js',library: 'Yw',libraryTarget: 'umd'},

通过extract-text-webpack-plugin插件将scss单独打包(yw.css)，便于外部引用；

{test: /\.scss$/,use: ExtractTextPlugin.extract({fallback: 'vue-style-loader',use: ['css-loader', 'sass-loader']})
},
module.exports.plugins = (module.exports.plugins || []).concat([new ExtractTextPlugin("yw.css",{allChunks: true}),......
])

pakage.json：

main结点是打包后的快捷路径(yw-ui)，可以直接引用，无需指定相对的路径(yw-ui/dist/yw.js)；
开源协议license为"MIT"；
将private设为false组件即可公用；

{"name": "ywbj-ui", //包名，npm install ****"description": "A components of pc base on vue2.X","version": "1.0.1", //每次打包上传，必须更新版本号"author": "yourName <****@**.com>", //输入你的信息和邮箱"main": "dist/yw.js", //必须和webpack打包的出口文件名一致"license": "MIT", //开源协议"private": false, //true为私有，false为公共
}

配置完成后执行npm run build，生成打包文件夹dist；

4）发布到npm

首先在npm官网(https://www.npmjs.com/)注册用户；
将本地npm源设置为https://registry.npmjs.org/ (若为淘宝源则登陆不成功);
进入项目文件夹，执行npm login会要求你输入用户名、密码和邮箱;
npm publish将打包后的文件发布到npm，成功后可在官网搜到包名(注意：每次publish之前需要更新pakage.json中的版本号，否则上传不成功)；

二. 安装使用自己的插件

#安装插件
npm install ywbj-ui --save#引入项目中
import YwUI from 'ywbj-ui'
import 'ywbj-ui/dist/yw.css'
Vue.use(YwUI)#组件中直接使用
<yw-button type="success" isDisabled>success</yw-button>

三. 自定义组件API文档

Button按钮组件

参数	说明	类型	可选值	默认值
shape	按钮的形状	string	圆角：circle’, 直角：‘rectangle’	‘ ’
isDisabled	是否禁用按钮	boolean	true/false	false
type	按钮的类型	string	‘default’,success’, ‘warning’, ‘error’, ‘info’	default
size	按钮的大小	string	‘large’, ‘medium’, ‘small’	‘ ’

Modal对话框组件

参数	说明	类型	可选值	默认值
isShow	是否显示	boolean	true/false	false
width	宽度	number
showTitle	是否显示标题	boolean	true/false	true
showBody	是否显示主体	boolean	true/false	true
showFooter	是否显示按钮	boolean	true/false	true
size	对话框大小	string	‘large’, ‘medium’, ‘small’	‘medium’

四. 引用效果展示

前端组件库(Element UI)的实现原理：教你如何实现自定义组件库，并打包发布至npm相关推荐

【前端】Vue+Element UI案例：通用后台管理系统-用户管理：Table表格增删查改、Pagination分页、搜索框
文章目录目标代码 0.结构 1.按钮-删除 2.按钮-编辑 3.debug 4.样式 5.分页Pagination:功能 6.分页Pagination:样式 7.搜索框:功能 8.搜索框:样式总 ...
【前端】Vue+Element UI案例：通用后台管理系统-用户管理：Form表单填写、Dialog对话框弹出
文章目录目标代码 0.页面结构 1.新增按钮和弹出表单:结构 2.新增按钮和弹出表单:点击新增弹出表单 3.表单样式 4.表单验证 5.表单的提交和取消功能:接口.mock相关准备 6.表单的提交 ...
【前端】Vue+Element UI案例：通用后台管理系统-登陆不同用户显示不同菜单、动态添加路由
文章目录目标代码 0.动态地显示菜单:store 1.动态注册路由 2.解决刷新后摆平问题总代码本篇修改的代码文件 tab.js 参考视频: VUE项目,VUE项目实战,vue后台管理系统,前 ...
【前端】Vue+Element UI案例：通用后台管理系统-代码总结（已开源）
文章目录前言项目文件目录 api mockServe home.js permission.js index.js mock.js user.js assert components Common ...
vue组件库介绍以及组件库Element UI 的使用
组件库前言这篇文章介绍vue组件库! 介绍什么是组件库以及Element UI组件库的使用! 看完不会你打我.哈哈哈,开玩笑的,不多说,上刺刀!! 1. 什么是 vue 组件库在实际开发中,前端 ...
Vue UI组件库(Element UI库)
1 移动端常用 UI 组件库 1. Vant Vant 4 - 轻量.可定制的移动端组件库 (vant-ui.github.io) 2. Cube UI cube-ui Document (didi ...
前端笔记-在Element UI中表格如何根据数据动态变化显示
前言实际上我需要的功能类似于前端工程中的字典.由于在前端的学习自己写代码的过程中可能不会对一个项目工程化的如此的彻底,所以这里给出了一种解决方法. 需求对于Element UI里的表格,如果假设传 ...
Element UI极简教程(4)：Select、Switch组件的使用
Java大联盟致力于最高效的Java学习关注 B 站搜索:楠哥教你学Java 获取更多优质视频教程 Select 下拉框 Element UI 的 Select 直接使用 el-select ...
Web前端笔记-修改element ui中表格样式（透明、去横纵线等含修改思路）
官方效果是这样的: 此处改成了这样的效果: 此处是可以进行滑动的,就是去除了滑动条,仍能滑动的效果. 下面说下修改样式,找到使用el-table的vue组建: 在style中贴上: <style ...

前端组件库(Element UI)的实现原理：教你如何实现自定义组件库，并打包发布至npm

前端组件库实现原理

前言

Demo地址

一. 组件库开发流程

1）新建vue项目：

2）编写自定义组件，封装成插件：

3）修改配置项

webpack.config.js：

pakage.json：

4）发布到npm

二. 安装使用自己的插件

三. 自定义组件API文档

Button按钮组件

Modal对话框组件

四. 引用效果展示

前端组件库(Element UI)的实现原理：教你如何实现自定义组件库，并打包发布至npm相关推荐

最新文章

热门文章