vue制作自己的组件库（仿ElementUI）

9月前分类：Toy博客阅读(38) 违法举报

这篇具有很好参考价值的文章主要介绍了vue制作自己的组件库（仿ElementUI）。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

1.首先自己创建个新的vue项目，之后更改下目录形式，将src文件更改为examples，这里是专门放组件展示的md文件，packages文件里是放自己写的组件代码

vue制作自己的组件库（仿ElementUI）

2.然后是开始配置vue.config.js文件，其中md-loader是读取md文件的相关配置

vue制作自己的组件库（仿ElementUI）

vue制作自己的组件库（仿ElementUI）

vue制作自己的组件库（仿ElementUI）

3.配置好了之后，就可以开始写组件了，这里就举个简单的例子，Icon的组件

vue制作自己的组件库（仿ElementUI） Icon组件的字体图标可以从字体图标库自己选择下载，放到fonts文件中，之后在icon.scss中引用，这个就不细说了。

在packages文件下创建icon的相关文件，icon.vue文件中如下这样写：

vue制作自己的组件库（仿ElementUI）

然后再index.js 中

vue制作自己的组件库（仿ElementUI）

之后在packages文件的总入口index.js中引入就可以了

vue制作自己的组件库（仿ElementUI）

这样一个Icon组件就开发完了。

4.下面就要测试自己的组件了

vue制作自己的组件库（仿ElementUI）

在main.js里引用自己的组件库，就像引用elementUI一样

vue制作自己的组件库（仿ElementUI）

之后就可以使用组件了。

下一篇：创建UI组件库后上传NPM文章来源地址https://www.toymoban.com/news/detail-478316.html

到了这里，关于vue制作自己的组件库（仿ElementUI）的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：如若内容造成侵权/违法违规/事实不符，请点击违法举报进行投诉反馈，一经查实，立即删除！

分享到：

领支付宝红包赞助服务器费用

vue3 组件自己引用自己递归组件组件命名

本人前端开发一枚，以前一直用vue2.0，为了更新自己掌握的技术学习如何使用vue3.0。在vue3.0项目中想要实现菜单组件，要使用到递归组件的方法，发现不知道怎么给组件重命名！！在vue2.0中想要实现递归组件方式很简单，只要给组件命名，然后自己调用即可：然而在vue3.0中

2024年02月06日
浏览(48)
【VUE】使用elementUI tree组件根据所选id自动回显

需求如下： 1.点击父级节点将父级节点下children中所有id放入数组 2.点击父级下的子节点将点击的子节点放入数组 3.取消选择父节点，将放入数组的所有子节点id删除 4.根据选择的子节点数组，匹配他所属的父节点

2024年02月15日
浏览(38)
VUE 组件中自己调用自己

父组件 ( 正常引入调用 ) 子组件 ( 组件中需定义name名称 )

2024年02月16日
浏览(36)
vue elementui的select组件实现滑到底部分页请求后端接口

老规矩，直接上最后的实现效果直接上代码 scrollStop主要是用来诊断select移到底部不再请求数据，默认为false。思路反正就是到底了触发函数处理，pageNo++请求后端接口

2024年02月07日
浏览(49)
vue3项目创建（vite3+ts+elementui-plus）

目的：vue3+vite+ts 安装依赖，安装vite的工具 Vite下一代的前端工具链为开发提供极速响应v4.3 创建工程 –template vue-ts 后面的是配置模板，有很多，也有react，官网有介绍启动工程安装路由配置vite-env.d.ts 为了让ts识别.vue文件安装element-plus 注意vue3用的是element-plus别装错版本了

2024年02月16日
浏览(51)
vue2 Elementui 树形组件怎么实现多选并获取选中节点的node对象

一.前言树形组件是我们经常用到的组件，主要场景就是：公司后台管理的部门管理，做文章目录等。二.常用的几种方法及说明 1.node-click：节点被点击时的回调共三个参数，依次为：传递给 data 属性的数组中该节点所对应的对象、节点对应的 Node 、节点组件本身。 2.c

2024年02月16日
浏览(45)
vue+axios+el-progress(elementUI组件)实现下载进度条实时监听（小白简洁版）

方案：使用axios方法onDownloadProgress方法监听下载进度使用此方式的前提！！！请让后端在响应头中加上 content-length ，存放下载文件的总大小，如下图： 1、进度条页面代码如下： 2、点击下载按钮的js方法逻辑部分在 Axios 中， onDownloadProgress 是一个回调函数，它作为参数传

2024年02月05日
浏览(39)
vue+elementui中el-upload组件上传文件时，修改文件名，不用FormData

今天在开发的时候，后端突然提了一个需求，因为特殊的文件上传不进文件服务器，所以后端问我能不能上传的时候给加个扩展名，本着只要逻辑没问题，都可以通过代码实现的理念，我说：“可以“”，于是乎有了这篇文章。首先是去element官网逛了逛，发现也没有提供修

2024年02月06日
浏览(45)
O2OA(翱途)开发平台如何在流程表单中使用基于Vue的ElementUI组件?

本文主要介绍如何在O2OA中进行审批流程表单或者工作流表单设计，O2OA主要采用拖拽可视化开发的方式完成流程表单的设计和配置，不需要过多的代码编写，业务人员可以直接进行修改操作。在流程表单设计界面，可以在左边的工具栏找到ElementUI组件。将对应的组件拖动到表

2024年03月09日
浏览(35)
前端vue elementUI upload上传组件封装&多文件上传&进度条，后端servlet request.getPart()接收文件信息

选中多个文件上传通过 axios请求 onUploadProgress 方法监听 on-progress on-success 用这两个钩子函数实现进度条下面有对应的函数。本文是每个文件一个请求上传也可以用一个请求上传多个文件，需要将文件遍历添加到 form 表单中，后端用 request.getParts(); 获取集合，有需要的可以改

2024年02月11日
浏览(54)