自定义vue.js全局组件库（仿MintUI）

在项目开发中，我们总会引入很多别人封装好的组件模板，使用时仅仅三步，第一步就是install,第二步在main.js里面引入，第三步Vue.use这个组件。例如MintUI，试想我们是否可以自己仿照MintUI写一个自己的组件同样让别人使用，设置成全局组件呢？下面就依照MintUI编写自己的组件库。

1. 创建组件模板

如上图，创建了两个组件模板Loading和MyButton，组件模板代码以Loading为：

//Loading组件模板<template><transition name="mint-indicator"><div class="mint-indicator" v-show="visible"><div class="mint-indicator-wrapper" :style="{ 'padding': text ? '20px' : '15px' }"><div class="loader"><div class="loader-inner ball-spin-fade-loader"><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div></div></div><!--<spinner class="mint-indicator-spin" :type="convertedSpinnerType" :size="32"></spinner>--><span class="mint-indicator-text" v-show="text">{{ text }}</span></div><div class="mint-indicator-mask" @touchmove.stop.prevent></div></div></transition></template>
<script>export default {name: 'Loading',data(){return{visible:true,text:'加载中'}}}
</script><style scoped>.mint-indicator {-webkit-transition: opacity .2s linear;transition: opacity .2s linear;}.mint-indicator-wrapper {top: 50%;left: 50%;position: fixed;-webkit-transform: translate(-50%, -50%);transform: translate(-50%, -50%);border-radius: 5px;background: rgba(0, 0, 0, 0.4);color: lightgray;box-sizing: border-box;text-align: center;border: 1px solid lightgray;}.mint-indicator-text {display: block;color: white;text-align: center;font-size: 16px;}.mint-indicator-spin {display: inline-block;text-align: center;}.mint-indicator-mask {top: 0;left: 0;position: fixed;width: 100%;height: 100%;opacity: 0;background: transparent;}.mint-indicator-enter, .mint-indicator-leave-active {opacity: 0;}.loader{width:30px;height: 30px;margin-left: 20px;}@keyframes ball-spin-fade-loader {50% {opacity: 0.3;-webkit-transform: scale(0.4);transform: scale(0.4); }100% {opacity: 1;-webkit-transform: scale(1);transform: scale(1); } }.ball-spin-fade-loader {position: relative; }.ball-spin-fade-loader > div:nth-child(1) {top: 10px;left: 0;-webkit-animation: ball-spin-fade-loader 1s 0s infinite linear;animation: ball-spin-fade-loader 1s 0s infinite linear; }.ball-spin-fade-loader > div:nth-child(2) {top: 7.04545px;left: 7.04545px;-webkit-animation: ball-spin-fade-loader 1s 0.12s infinite linear;animation: ball-spin-fade-loader 1s 0.12s infinite linear; }.ball-spin-fade-loader > div:nth-child(3) {top: 0;left: 10px;-webkit-animation: ball-spin-fade-loader 1s 0.24s infinite linear;animation: ball-spin-fade-loader 1s 0.24s infinite linear; }.ball-spin-fade-loader > div:nth-child(4) {top: -7.04545px;left: 7.04545px;-webkit-animation: ball-spin-fade-loader 1s 0.36s infinite linear;animation: ball-spin-fade-loader 1s 0.36s infinite linear; }.ball-spin-fade-loader > div:nth-child(5) {top: -10px;left: 0;-webkit-animation: ball-spin-fade-loader 1s 0.48s infinite linear;animation: ball-spin-fade-loader 1s 0.48s infinite linear; }.ball-spin-fade-loader > div:nth-child(6) {top: -7.04545px;left: -7.04545px;-webkit-animation: ball-spin-fade-loader 1s 0.6s infinite linear;animation: ball-spin-fade-loader 1s 0.6s infinite linear; }.ball-spin-fade-loader > div:nth-child(7) {top: 0;left: -10px;-webkit-animation: ball-spin-fade-loader 1s 0.72s infinite linear;animation: ball-spin-fade-loader 1s 0.72s infinite linear; }.ball-spin-fade-loader > div:nth-child(8) {top: 7.04545px;left: -7.04545px;-webkit-animation: ball-spin-fade-loader 1s 0.84s infinite linear;animation: ball-spin-fade-loader 1s 0.84s infinite linear; }.ball-spin-fade-loader > div {background-color: white;width: 7px;height: 7px;border-radius: 100%;margin: 2px;-webkit-animation-fill-mode: both;animation-fill-mode: both;position: absolute; }
</style>

2. 在组件加载入口的index.js文件里面添加install方法

import LoadingComponent from './Loading'
import myButton from './MyButton'
const Loading = {install: function (Vue) {Vue.component('Loading', LoadingComponent)}
}
const MyButton = {install: function (Vue) {Vue.component('MyButton', myButton)}
}// 导出组件
export {Loading,MyButton
}

注：上面我引入了两个组件，也可以引入更多组件，如果只有一个组件时，我们用export default，两个或多个时用export {}的方法。

3. webpack首先会加载main.js，所以在main的js里面引入

import MintUI from 'mint-ui'
Vue.use(MintUI)import {Loading,MyButton} from "./components/loading/index"
Vue.use(Loading)
Vue.use(MyButton)

注：用export default引入时，只需要用上面import MintUI from 'mint-ui'方式，如果用export引入，只能时import {Loading,MyButton}的形式。

4. 使用组件

<template><div><Loading></Loading><MyButton></MyButton></div>
</template>

5. 渲染后的效果图：

在此提醒注意引入路径问题，./表示当前目录 ../表示父级目录。

自定义vue.js全局组件库（仿MintUI）相关推荐

前端资源：分享7 个常用的 Vue.js 开源组件库
❤️作者主页:IT技术分享社区 ❤️作者简介:大家好,我是IT技术分享社区的博主,从事C#.Java开发九年,对数据库.C#.Java.前端.运维.电脑技巧等经验丰富. ❤️荣誉: CSDN博客专家. ...
基于Vue结合Vant组件库的仿电影APP
Vue综合案例 Vue综合案例一.项目概要 1.效果前瞻 2.开发流程 3.开发环境二.初始化及必要知识点 1.初始化远程仓库 2.创建项目 3.路由规划 4.反向代理配置 5.网络请求封装 6. ...
vue 添加全局组件_自定义vue2.0全局组件（下篇）
在上篇中,老K为大家介绍了一个初级自定义按钮组件的编写方法.虽然能用,但是还不算完美,可扩展性不够强大.在这一篇中,老K继续为大家完善这个按钮组件. 启动命令窗口, 进入在上篇中我们搭建的vue目录中 ...
Vue 开发的组件库
16款优秀的Vue UI组件库推荐 Vue 是一个轻巧.高性能.可组件化的MVVM库,API简洁明了,上手快.从Vue推出以来,得到众多Web开发者的认可. 在公司的Web前端项目开发中,多个项目采用 ...
Vue.js 父子组件通信的十种方式；告诉世界前端也能做 AI；你可能不知道的14个JavaScript调试技巧...
记得点击文章末尾的"阅读原文"查看哟~ 下面先一起看下本周的摘要吧~ 想了解老用户如何参与阿里云双十一1折拼团特惠主机的,可以看第二条推送,文中提供了两种方法~,一起看看本周有哪些 ...
[转]VUE优秀UI组件库合集
原文链接随着SPA.前后端分离的技术架构在业界越来越流行,前端的业务复杂度也越来越高,导致前端开发者需要管理的内容,承担的职责越来越多,这一切,使得业界对前端开发方案的思考多了很多,以react.v ...
从零开始编写一个微信小程序（微信开发者工具+JS+WuxUI组件库+云开发）万字整理，建议收藏！
微信小程序-魔镜笔记&源码(微信开发者工具+JS+UI组件库+云开发) 效果展示视频演示经历了一次升级之后,我的小程序怎么样了? 文章目录微信小程序-魔镜笔记&源码(微信开发 ...
VUE优秀UI组件库（PC和Mobile）
引用: https://my.oschina.net/u/3219445/blog/1573155 随着SPA.前后端分离的技术架构在业界越来越流行,前端的业务复杂度也越来越高,导致前端开发者需要管理 ...
如何开发一个基于 Vue 的 ui 组件库
如何开发一个基于 Vue 的 ui 组件库开发模式预览 demo 在开发一个 ui 组件库时,肯定需要一边预览 demo,一边修改代码. 常见的解决方案是像开发一般项目一样使用 webpack-d ...
Vue 开发 UI 组件库
Vue 开发 UI 组件库前言一.开发环境搭建 1.项目初始化 2.开发前准备二.Vue 实现常用组件 1.button 组件 1.1 参数支持 1.2 事件支持 1.3 Button 组件 1 ...

自定义vue.js全局组件库（仿MintUI）

自定义vue.js全局组件库（仿MintUI）相关推荐

最新文章

热门文章