前端组件库实现原理

• 前言
• 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} = this
  let 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’

四. 引用效果展示