基于Vue封装一个自己的UI组件库之项目篇
闲来无事，准备动手封装一个UI库，功能后面一点点完善，欢迎有兴趣的朋友一起编写，下方留言或者私聊都可。
初始化项目
npm install -g @vue/cli //全局安装vue vue create destiny-ui //创建项目 复制代码
目录结构
| 文件夹 | 说明 |
|---|---|
| dist | 文档打包目录 |
| examples | 组件案例目录 |
| node-modules | 安装依赖目录 |
| packages | 组件目录 |
| public | 文件资源目录 |
| .npmignore | 上传npm忽略目录 |
| package.json | 项目配置信息目录 |
| vue.config | 项目配置目录 |
| README | 说明目录 |
首先来封装一个Button组件
<template> <button :class="[ `de-button-${type}`, { 'is-plain': plain }, { 'is-round': round }, { 'is-circle': circle }, { 'is-disabled': disabled }, ]" @click="handleClick" :disabled="disabled" > <span> <slot></slot></span> </button> </template> <script> export default { name: "DeButton", props: { type: { type: String, default: "default", }, plain: { type: Boolean, default: false, }, round: { type: Boolean, default: false, }, circle: { type: Boolean, default: false, }, disabled: { type: Boolean, default: false, }, }, mounted() {}, methods: { handleClick(e) { this.$emit("click", e); }, }, }; </script> <style scoped> .de-button { display: inline-block; line-height: 1; white-space: nowrap; cursor: pointer; background: #ffffff; border: 1px solid #dcdfe6; color: #606266; -webkit-appearance: none; text-align: center; box-sizing: border-box; outline: none; margin: 0; transition: 0.1s; font-weight: 500; //禁止元素的文字被选中 -moz-user-select: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; padding: 12px 20px; font-size: 14px; border-radius: 4px; &:hover, &:focus { color: #409eff; border-color: #c6e2ff; background-color: #ecf5ff; } } .de-button-primary { color: #fff; background-color: #409eff; border-color: #409eff; &:hover, &:focus { background: #66b1ff; background-color: #66b1ff; color: #fff; } } .de-button-success { color: #fff; background-color: #67c23a; border-color: #67c23a; &:hover, &:focus { background: #85ce61; background-color: #85ce61; color: #fff; } } .de-button-info { color: #fff; background-color: #909399; border-color: #909399; &:hover, &:focus { background: #a6a9ad; background-color: #a6a9ad; color: #fff; } } .de-button-warning { color: #fff; background-color: #e6a23c; border-color: #e6a23c; &:hover, &:focus { background: #ebb563; background-color: #ebb563; color: #fff; } } .de-button-danger { color: #fff; background-color: #f56c6c; border-color: #f56c6c; &:hover, &:focus { background: #f78989; background-color: #f78989; color: #fff; } } // 朴素按钮样式 .de-button.is-plain { &:hover, &:focus { background: #fff; border-color: #489eff; color: #409eff; } } .de-button-primary.is-plain { color: #409eff; background: #ecf5ff; &:hover, &:focus { background: #409eff; border-color: #409eff; color: #fff; } } .de-button-success.is-plain { color: #67c23a; background: #c2e7b0; &:hover, &:focus { background: #67c23a; border-color: #67c23a; color: #fff; } } .de-button-info.is-plain { color: #909399; background: #d3d4d6; &:hover, &:focus { background: #909399; border-color: #909399; color: #fff; } } .de-button-warning.is-plain { color: #e6a23c; background: #f5dab1; &:hover, &:focus { background: #e6a23c; border-color: #e6a23c; color: #fff; } } .de-button-danger.is-plain { color: #f56c6c; background: #fbc4c4; &:hover, &:focus { background: #f56c6c; border-color: #f56c6c; color: #fff; } } // round属性 .de-button.is-round { border-radius: 20px; padding: 12px 23px; } // circle属性 .de-button.is-circle { border-radius: 50%; padding: 12px; } // disabled属性 .de-button.is-disabled { cursor: not-allowed; } </style> 复制代码同目录上新建index.js,用于按需导入导出组件
import Button from './Button' Button.install = function (Vue) { Vue.component(Button.name, Button) } export default Button 复制代码在文件中使用
<de-button>按钮</de-button> 复制代码
配置项目
在packages文件下新建index.js，当组件库被使用时自动注册到Component上
// 整个包的入口 // 统一导出 import Button from './Button/index' import './fonts/iconfont.css' const components = [ Button, ] // 定义install方法 const install = function (Vue) { // 注册所有的组件 components.forEach(component => { Vue.component(component.name, component) }) } // 判断是否直接引入文件，如果是，就不用调用Vue.use() if (typeof window !== 'undefined' && window.Vue) { install(window.Vue) } // 导出install方法 export default { install, Button } // 支持按需导入 export { install, Button } 复制代码使用
全局注册
import DestinydUi from 'destinys-ui'; Vue.use(DestinydUi) 复制代码
按需引入
import {Button} from 'destinys-ui'; Vue.use(Button) 复制代码配置打包文件
在package.json文件中配置打包命令
注意：每次打包的时候都需要更改version,要不然登录不上去；private必须是false；name必须在npm官方是唯一的
{ "name": "destinys-ui", "version": "0.3.7", "private": false, "main": "dist/destinys-ui.umd.js", "author": { "name": "xxxx", "email": "xxxx@qq.com" }, "scripts": { "lib": "vue-cli-service build --target lib packages/index.js" }, } 复制代码在.npmignore配置忽略目录
# 忽略目录 examples/ packages/ public/ # 忽略指定文件 vue.config.js babel.config.js *.map 复制代码
最后执行打包命令
npm run lib 复制代码
发布npm
1.查看自己使用的是否为npm官方源(必须是官方源)
npm get registry //查看使用的是什么源 npm config set registry https://registry.npmjs.org/ //切换官方源 npm config set registry http://registry.npm.taobao.org //切换淘宝源 复制代码
2.登录npm
若没有npm账号，自己去官网注册，这里不做说明
npm login 复制代码
这里会让你输入用户名、密码、邮箱
3.发布
npm publish 复制代码
注意：若发布失败，有一下几种情况
package.json
1.version //和之前发布的版本号一样，换一个即可 2.private //没有设置为false 3.name //在npm官网上名字已经存在。换一个即可 复制代码
使用发布的UI库
1.安装
npm i destinys-ui 复制代码
2.使用 main.js
//全局引入 import DeDestinysUI 'destinys-ui' Vue.use(DeDestinysUI) ------------------------ //按需引入 import {Button} 'destinys-ui' Vue.use(Button) 复制代码3.组件中使用 xxx.vue
<template> <de-button>按钮</de-button> </template> 复制代码
\
作者：destiny
链接：https://juejin.cn/post/7054455703599054862