基于elementUI封装自己的UI组件库
初始化 project
这里我们使用官方的 vue-cli 初始化一个 Vue 项目
npm install -g @vue/cli # or yarn global add @vue/cli vue create admin-ui
在src的同级目录创建packages文件夹,用于存放需要打包的组件
package目录结构
接下来让我们写一个简单的Vue component,基于elementUI的input组件的封装
<template> <div v-show="showInput"> <el-input v-model="currentValue" v-bind="$props" @keydown.enter.native="handleInputEnter" :placeholder="placeholder" :dataType="dataType" ref="input" :inputPattern='inputPattern'> </template> </el-input> <div :style="{ visibility: !!editorErrorMessage ? 'visible' : 'hidden' }">{{ editorErrorMessage }}</div> </div> </template> <script> import { Input, Button, Select, Option } from 'element-ui' import pattern from '../../pattern.js' const EMAIL_ERROR = '邮箱验证失败'; export default { name: "FkInput", data() { return { editorErrorMessage: null, showInput: true, inputType: '', emailPattern: pattern.email }; }, props: { ...Input.props, //继承elementUI原有的props ...Button.props, ...Select.props, ...Option.props, value: { type: [Number, String], default: '' }, placeholder: { type: String, default: '请输入内容' }, inputPattern: { type: [Object, String], default: null } }, computed: { currentValue: { get: function() { return this.value; }, set: function(newValue) { this.$emit("input", newValue); // 通过 input 事件更新 model } } }, methods: { evtChange(newValue, lr) { this.$emit('change', newValue, lr); // 事件传值 }, handleInputEnter() { if (this.inputType !== 'textarea') { this.validate() } }, validate() { const type = this.dataType && this.dataType.toLowerCase(); var pattern = this.inputPattern ? this.inputPattern.pattern : '', message = this.inputPattern ? this.inputPattern.message : ''; if (type || pattern) { switch (type) {//在实际项目中需要对多种输入数据类型进行验证,本例只验证了邮箱 case 'email': pattern = this.emailPattern; message = EMAIL_ERROR; break; default: break; } if (pattern && !pattern.test(this.currentValue || '')) { this.editorErrorMessage = message; return false; } } this.editorErrorMessage = ''; } }, mounted() { this.$nextTick(_ => { this.inputType = this.$refs.input.type; }) console.log('mounted'); }, updata() { }, watch: { currentValue: { immediate: true, handler(val) { this.$nextTick(_ => { if (this.inputType !== 'textarea' && val !== '') { this.validate(); } else if (val == '') { this.editorErrorMessage = '' } }); } } } } </script> <style stylus="css"> </style>
组件需加上name属性,在使用组件时,用的就是name的值作为标签值,上面的input组件在使用时<fk-input></fk-input>
配置 project
下面我们来配置当前项目, 以使其可以发布到 npm 上.
如果组件进行按需引入,我们需要每个组件注册到Vue上,因此单个组件中需要暴露我们的Component:
/packages/input/index.js import FkInput from './src/input.vue' FkInput.install = function (Vue) { Vue.component(FkInput.name, FkInput) } export default FkInput
然后我们编辑入口文件 packages/index.js,使其被作为UI库导入时能自动在Vue中注册我们的Component:
import FkInput from './input/index.js' const components = [ FkInput ] const install = function(Vue) { components.forEach(component => { Vue.component(component.name, component); }); } if (typeof window !== 'undefined' && window.Vue) { install(window.Vue); } export default { FkInput, install } export { FkInput, install }
elementUI的引入方式有两种:一种是按需引入,比如某个项目中只使用了某几个组件,可以使用下面的方式
import { Button,Input } from 'element-ui' Vue.use(Button) Vue.use(Input)
如果项目中使用了很多elementUI组件,为了避免漏掉引入的组件,可以使用下面的引入方式
import UI from 'element-ui' Vue.use(UI)
此处也是为了可以使用按需引入的方式进行加载组件,export了两次;
export暴露出来可以在使用时按需引入,export default暴露出来的组件只能在使用时全局引入。
接下来我们添加 build项目的脚本到package.json的scripts中:
其中 --name admin-ui 指定的是要发布的library的名称,我们执行上面新家的脚本:
npm run lib
这里我们选择默认发布我们的 *.common.js 文件, 所以我们在 package.json中添加main属性.
指定该属性后, 当我们引用该组件库时, 会默认加载 main 中指定的文件.
最后, 我们再配置 package.json中的 files属性, 来配置我们想要发布到 npm 上的文件路径.
我们这里将用户引用我们的组件库可能用到的所有文件都放进来:
最终的配置为
npm 发布
首先我们注册一个 npm 账号 (如果已有账号, 可以跳过此步骤)
npm add user// 按照提示输入用户名, 邮箱等即可
然后使用 npm login 登录注册号的状态
登录后可以使用 npm whoami
查看登录状态
在发布之前, 我们修改一下项目的名称(注意不要和已有项目名称冲突), 推荐使用 @username/projectName 的命名方式.
接下来我们就可以发布我们的 UI 组件库了, 在发布之前我们再编译一次, 让build出的文件为我们最新的修改:
npm run lib
我们使用下面的命令发布我们的项目:
npm publish --access public
需要注意的是 package.json中指定的version属性: 每次要更新我们的组件库都需要更新一下version,配置中的private属性需要设置为false
测试使用
这样我们就完成了自己的 UI 组件库的发布. 接下来我们可以在任何需要使用到该组件库的项目中使用:
Import UI '@ssthouse/admin-ui' Vue.use(UI)
接下来我们就可以在 Vue的template中使用组件库中的 Component了:
<template> <fk-input v-model="input" :inputPattern="inputPattern" clearable></fk-input> </template> <script> export default { name: '', data() { return { input: '', placeholder: '', inputPattern:{ pattern: /[\w!#$%&'*+/=?^_`{|}~-]+(?:\.[\w!#$%&'*+/=?^_`{|}~-]+)*@(?:[\w](?:[\w-]*[\w])?\.)+[\w](?:[\w-]*[\w])?/, message: '此信息是验证失败提示' } } } } } </script>
最后
经过上面这些步骤后, 我们就拥有了一个属于自己的组件库了. 我们可以随时更新, 发布自己新版的组件库.
而依赖了该组件库的项目只需要使用简单的 npm 命令即可更新 : )
- 相关文章
创建非矩形网页页面元素的常用技术和实例代码
非矩形设计正在变成一种时尚,比如波浪形、菱形、三角形等:而随着技术发展,这种设计在技术实现上也变得更容易。本文以最简单的三角形为例,演示使用5种方法来...
WebGL Roadmap
Unity 5.0 shipped with a working preview of our WebGL technology in March this year. Since then, Google has disabled (by default) NPAPI support in the...
CSS3原生变量(Native Variables)新特性简介
对Web开发者来说,一个盼望已久的特性是CSS终于支持原生变量了!
变量是程序语言中用来解决代码重复和进行表达式计算的关键概念(想想数学方程式中的x)。...常见面试题JavaScript闭包(ES5语法)
JavaScript闭包(Closure)是常见的JS面试题,是否理解闭包是一个简单的区分JS初级和高级程序员的判例。几乎每个JS程序员都在使用闭包,有意或无意间。比如编写一个jQuery鼠标点击处理函数:$(function()
CSS3弹性布局弹性流(flex-flow)属性详解和实例
弹性布局是CSS3引入的强大的布局方式,用来替代以前Web开发人员使用的一些复杂而易错hacks方法(如使用float进行类似流式布局)。其中flex-flow是flex-direction...
使用HTML5 FileReader和Canvas压缩用户上传的图片
手机用户拍的照片通常会有2M以上,这对服务器带宽产生较大压力。因此在某些应用下(对图片要求不那么高)我们可以在客户端来压缩图片,然后再提交给服务器。总体...
三维向量的简单运算和实用意义
在WebGL的实际应用中我们广泛使用向量的几何运算来计算角度、距离,判断点线、点面之间的关系,比如物体之间的碰撞检测。本文简要介绍三维计算机图形学中常用的...
Blender2.7 快捷键一览表
通用操作
停止当前操作:ESC
快捷搜索:SPACE撤销:ctrl+z重做:ctrl+shift+z渲染:F12
单选:鼠标右键(RMB)全选:A
框选:B
刷选:...Three.js入门教程6 - 创建全景图和纹理
全景图非常酷。使用Three.js做一个属于自己的全景图并不是那么困难。要做一个全景图,你需要一个软件用来做一张全景图片。我使用了iPhone上的Microsoft Photosyn...
Three.js入门教程5 - 10个必须知道的编程技巧
作者为Google的Paul,关于如何写出好的WebGL代码的文章。和很多开发者一样,我通过实践学习,但同时我也向其他更有经验的开发者们学习。在过去的几个月中,我在c...
WebGL入门教程5 - 详解纹理滤镜(Texture Filter)
WebGL中使用纹理贴图来实现细腻的物体表面观感,其中一个重要的参数是纹理滤镜(Texture Filter)。
这个参数用来处理当对象出现缩放时,纹理如何处理中间...浏览器控制台报JS脚本执行错误:Module is not defined
现在JS分成了两个分支,一部分在服务器端发展如NodeJS,一部分是传统的浏览器运行环境。
有些插件在编写JS代码时,是针对Node编写的,所以直接在浏览器中使...WebGL入门教程3 - Canvas、Context、API和绘制一个矩形
WebGL入门教程2 - GPU基本概念和工作流水线(渲染管道)
Three.js 3D打印数据模型文件(.STL)加载
3D打印是当下和未来10年产品技术主流方向之一,影响深远。对于电子商务类的3D打印网站,一个主要功能是把商品以3D的方式呈现出来,也就是3D数据可视化技术。HTML...
如何使用CSS3/SCSS实现逼真的车窗雨滴效果
在天气预报类的Web移动应用中,常常需要实现屏幕的雨滴效果,表示阴雨天气。感觉上比较神奇,其实想通了,这个效果的实现只需要一点物理知识和CSS3的简单变换。实现一个小雨滴首先雨滴是一个个小的椭圆形元素:.raindrop
更多...