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

前言

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

Demo地址

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

git clone [e-mail]: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'

四. 引用效果展示