基于Vue封装一个自己的UI组件库之项目篇

#基于Vue封装一个自己的UI组件库之项目篇| 来源: 网络整理| 查看: 265

闲来无事，准备动手封装一个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组件

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); }, }, }; .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; } 复制代码

同目录上新建index.js,用于按需导入导出组件

import Button from './Button' Button.install = function (Vue) { Vue.component(Button.name, Button) } export default 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": "[email protected]" }, "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

按钮复制代码

【本文地址】

公司简介

联系我们