p-zzl-ui v0.1.3
搭建个人P-UI组件库
1.涉及知识点
- vue基础语法
- 组件基本语法
- 组件通讯(sync,provide,inject)
- 插槽的使用
- props校验
- 过渡与动画处理
- 计算属性与监听属性
- v-model语法糖
- vue插件机制
- npm发布2.组件库使用方式
- 初始化vue项目
vue create demo
- 安装组件库
yarn add p-zzl-ui
- 全局导入
import p-zzl-ui from 'p-zzl-ui'
import 'p-zzl-ui/dist/p-zzl-ui.css'
Vue.use(p-zzl-ui)button组件
前置知识
组件通讯
组件插槽
props校验参数支持
参数名 参数描述 参数类型 默认值
type 按钮类型(primary / success / warning / danger / info) string default
plain 是否是朴素按钮 boolean false
round 是否是圆角按钮 boolean false
circle 是否是圆形按钮 boolean false
disabled 是否禁用按钮 boolean false
icon 图标类名 string 无
事件支持
事件名 事件描述
click 点击事件dialog组件
前置知识
vue过渡与动画
sync修饰符
具名插槽与v-slot指令参数支持
参数名 参数描述 参数类型 默认值
title 对话框标题 string 提示
width 宽度 string 50%
top 与顶部的距离 string 15vh
visible 是否显示dialog（支持sync修饰符） boolean false事件支持
事件名 事件描述
opened 模态框显示的事件
closed 模态框关闭的事件插槽说明
插槽名称 插槽描述
default dialog的内容
title dialog的标题
footer dialog的底部操作区input组件
参数支持
参数名称 参数描述 参数类型 默认值
placeholder 占位符 string 无
type 文本框类型(text/password) string text
disabled 禁用 boolean false
clearable 是否显示清空按钮 boolean false
show-password 是否显示密码切换按钮 boolean false
name name属性 string 无 事件支持
事件名称 事件描述
blur 失去焦点事件
change 内容改变事件
focus 获取的焦点事件switch开关
参数支持
参数名称 参数描述 参数类型 默认值
v-model 双向绑定 布尔类型 false
name name属性 string text
activeColor 自定义的激活的颜色 string
inactiveColor 自定义的不激活的颜色 string
事件支持
事件名称 事件描述
change change时触发的事件radio组件
前置知识点
radio的基本使用参数支持
参数名称 参数描述 参数类型 默认值
v-model 双向绑定 布尔类型 false
label 单选框的value值 string，num,boolean ''
name name属性 string ....
封装成UI组件库
目录调整
根目录创建两个文件夹packages和examples
packages: 用于存放所有的组件 examples: 用于进行测试,把src改成examples
把components中所有的组件放入到packages中
把fonts放到packages中
删除原来的src目录
vue.config.js配置
新增vue.config.js配置
const path = require('path')
module.exports = {
pages: {
index: {
entry: 'examples/main.js',
template: 'public/index.html',
filename: 'index.html'
}
},
// 扩展 webpack 配置，使 packages 加入编译
chainWebpack: config => {
config.module
.rule('js')
.include.add(path.resolve(__dirname, 'packages')).end()
.use('babel')
.loader('babel-loader')
.tap(options => {
// 修改它的选项...
return options
})
}
}统一导出packages中所有的组件
// 统一导出 // 导入颜色选择器组件 import Button from './button' import Dialog from './dialog' import Input from './input' import Radio from './radio' import RadioGroup from './radio-group' import Switch from './switch' import Form from './form' import FormItem from './form-item' import './fonts/font.scss'
// 存储组件列表 const components = Button, Dialog, Input, Radio, RadioGroup, Switch， Form, FormItem
// 定义 install 方法，接收 Vue 作为参数。如果使用 use 注册插件，则所有的组件都将被注册 const install = function (Vue) { // 遍历注册全局组件 components.forEach(component => { Vue.component(component.name, component) }) }
// 判断是否是直接引入文件,如果是，就不用调用 Vue.use() if (typeof window !== 'undefined' && window.Vue) { install(window.Vue) }
// 导出的对象必须具有 install，才能被 Vue.use() 方法安装 export default { install }
测试
在examples中的main.js中进行导入测试
发布到npm与github
发布到github
发布到npm
在scripts中新增一条 打包命令
"lib": "vue-cli-service build --target lib packages/index.js"
- 发布到npm
修改package.json文件
"private": false,
"main": "dist/p-zzl-ui.umd.min.js",
"author": {
"name": "张正亮"
},
增加 `.npmignore文件
# 忽略目录
examples/
packages/
public/
# 忽略指定文件
vue.config.js
babel.config.js
*.map
npm发布
npm login npm publish