前言

对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

二. 安装使用自己的插件

#安装插件
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是否禁用按钮booleantrue/falsefalse
type按钮的类型string‘default’,success’, ‘warning’, ‘error’, ‘info’default
size按钮的大小string‘large’, ‘medium’, ‘small’‘ ’
Modal对话框组件
参数说明类型可选值默认值
isShow是否显示booleantrue/falsefalse
width宽度number
showTitle是否显示标题booleantrue/falsetrue
showBody是否显示主体booleantrue/falsetrue
showFooter是否显示按钮booleantrue/falsetrue
size对话框大小string‘large’, ‘medium’, ‘small’‘medium’

四. 引用效果展示

在这里插入图片描述
在这里插入图片描述

Logo

前往低代码交流专区

更多推荐