创建一个Vue的UI组件库类似Element

最新推荐文章于 2022-10-20 17:20:17 发布
最新推荐文章于 2022-10-20 17:20:17 发布
阅读量391 收藏
点赞数
分类专栏： elementui 组件 文章标签： vue.js javascript elementui
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_28770625/article/details/121161278
版权
本文档指导如何创建一个Vue CLI 3.0项目，构建一个自定义的UI组件库，模仿ElementUI。首先快速启动项目，接着调整项目结构和配置。详细介绍了组件如button的编写，以及在examples中如何引入和使用。最后，讲解了如何通过npm进行项目发布，包括配置package.json，打包，以及发布到npm仓库。
摘要由CSDN通过智能技术生成

1.快速创建一个vue-cli3.0的vue项目

2.修改项目结构

 

3.vue.config.js配置如下

4.配置packages的目录

5.button.vue组件的代码如下（button.vue组件（name必须写，用于标注的名字））

6.button.js代码如下

最低0.47元/天 解锁文章
AlisaAndStar
关注
专栏目录
模仿 element-UI 搭建 Vue UI组件库（一）
weixin_49834243的博客
04-13 829
实例目的 掌握组件封装的语法和技巧 学会造轮子，了解组件库实现原理 搭建和积累自己的组件库 实例内容 封装常见的功能性组件（button、Modal、Form相关）。把组件封装成 UI 组件库，并发布到 npm 上。 涉及知识 vue 基础语法 组件基本语法 组件通讯（sync，provide，inject） 插槽的使用 props 校验 过渡与动画的处理 计算属性、监听属性 v-model 语法糖 vue 插件机制 npm 的发布 使用 vue cli 初始化一个项目 使用 vue created
模仿 element-UI 搭建 Vue UI组件库（二）
weixin_49834243的博客
04-13 442
​ 封装 button 组件 前置知识： 组件通讯 组件插槽 props 校验 参数支持： 参数名 参数描述 参数类型 默认值 type 按钮类型（primary/success/warning/danger/info） string default plain 是否是朴素按钮 boolean false round 是否是圆角按钮 boolean false circle 是否是圆形按钮 boolean false disabled 是否禁用按钮 boolean fal
仿ElementUI构建自己的Vue组件库用babel-plugin-component按需加载组件及自定义SASS主题...
weixin_34311757的博客
04-22 605
最近使用ElementUI做项目的时候用Babel的插件babel-plugin-component做按需加载，使得组件打包的JS和CSS包体积大大缩小，加载速度也大大提升，所有想模仿做一个组件库也来做下按需加载。 首先用Vue CLI 3.0新建一个项目 vue create bes-ui 复制代码 注意的是cli3的脚手架用的Babel7的配置，只有babel.config.js文件，所以要自...
教你自己创建一个Vue的UI组件库类似Element
qq_38935512的博客
07-24 9444
** 网上看到了这篇文章 非常的棒哈 ** 前言 随着前端的三大框架的出现,组件化的思想越来越流行,出现许多组件库.它能够帮助开发者节省时间提高效率, 如React的Ant-design,Vue的iView,Element等,它们的功能已经很完善了. 我写这遍文章的目的:记录自己搭建UI库的过程(对Vue的理解加深了好多)演示地址 首先讲一下思路: 平常写组件时,写一个组件要用时直接导入就行了,如...
构建个人组件库，类似Element-ui使用方式，vue confirm公共弹框组件
qq_35430000的博客
05-06 897
一、要做什么？ 我们在引入Element-ui的时候有看到这种使用Vue.use()的用法，然后element-ui里所有的组件我们都可以全局使用，这到底是怎么做到的呢，下面我以一个公共弹框组件为例，说一说我的写法，仅供参考。 呈现的最后效果： （1）简单的标题 （2）提示内容可交互（v-html中的点击事件） 二、实践之前可以了解一下Vue的api (1)vue-exte...
基于Vue和Element UI的聊天室组件库设计源码
最新发布
04-12
本项目基于Vue和Element UI开发，包含336个文件，包括GIF动画、JavaScript脚本、PNG图片、Vue组件、SCSS样式表、JPG图片、ZIP文件、Markdown文档、JSON配置文件和WAV音频文件。系统实现了基于Vue和Element UI的聊天...
详细讲解如何创建, 发布自己的 Vue UI 组件库
10-16
为了解决这个问题，我们可以创建并发布自己的Vue UI组件库。下面，我们将详细介绍如何实现这一目标。 首先，我们需要初始化一个Vue项目。借助Vue CLI（命令行工具），我们可以快速生成一个基础的Vue项目框架。运行...
vue组件库(Element UI)
酷爱前端的小陈博客
05-19 1661
目录 1. 什么是 vue 组件库 2. vue 组件库和 bootstrap 的区别 3. 最常用的 vue 组件库 4. Element UI 4.1在 vue2 的项目中安装 element-ui 4.2 引入 element-ui 4.3 完整引入 4.4 按需引入 步骤1，安装babel-plugin-component：​编辑 步骤2，修改根目录下的babel.config.js 配置文件，新增plugins 节点如下：​编辑 步骤3，如果你只希望引入部分...
使用vue-cli创建发布个人的ui组件库（类似iview,element，ui）
茗霜的博客
10-23 788
最近在一篇满满女朋友的文章中，回忆起了暑假学长分配的重要任务需要等待我去完成。好好，事不宜迟开始搞。 一、创建一个项目 首先使用vue-cli创建一个webpack 的项目 vue init webpack zypc-components balabala,创建完成之后，下载依赖 npm install 二、将项目放到github上 将项目放到git上 git init git remote ...
element基于vuejs20的ui组件库
08-08
Vue.js 2.0的桌面UI元素
高仿Element.ui搭建属于自己的ui组件库(1)
lwl12345678_的博客
04-07 854
新建vue脚手架项目 Element.ui内部使用的css预编译为scss，所以我们选择dart-scss即可，其余正常创建； 剃干净初始化的项目，什么helloworld组件统统清理掉 /components下新建button.vue文件，作为我们第一个尝试的button组件 main.js中导入该组件并注册为全局组件 import Vue from 'vue' import App from './App.vue' import HButton from './components/button'
模仿element-ui封装vue组件库（一）
weixiaowei_2016的博客
03-06 7273
实例内容 封装常见的功能组件（Button，Modal，Form相关），封装完成后封装成UI组件库发布到NPM上。 涉及知识点 vue基础语法 组件基本语法 字键通讯（sync，provide，inject） 插槽使用 prop校验 过渡与动画处理 计算属性与监听属性 v-model语法糖 vue插件机指 npm发布 实例目的 掌握组件封装的语法和技巧 学会造轮子，了解...
像开发Element-Ui一样开发vue组件，当作npm包并上传到npm上
前端报刊
01-29 1747
开发vue组件首先要做的事就是先创建一个vue项目，通过vue-cli命令创建vue项目。 npm install -g @vue/cli vue create vm-mint-ui 新创建好的项目，目录如下： 下面我们修改一下配置文件，根据个人习惯修改。 package.json（初始配置） package.json（现修改为） 将“private”:true修改为false，即由私有的改为公共的才能上传到npm上，否则的话会上传失败。 项目启动，在这...
用vue脚手架创建一个项目 并且配置Element-UI组件库和配置axios库
MW
07-15 372
1.用vue可视化页面创建项目 window+R cmd 输入vue ui 2.安装Element插件,并且去项目中配置 然后在你的vue项目中的mian.js中加入三句话就行了 // 手动配置element-ui import ElementUI from 'element-ui' import 'element-ui/lib/theme-chalk/index.css' Vue.use(ElementUI) 3.配置axios库 去mian.js中加入两句话就行了 ...
不试着自己封装一个element-UI吗？vue3+ts+tsx+vite封装一个按钮ui组件（与element-ui，ant等相同效果）
随便写写
10-20 1047
vue3+ts+tsx+vite封装一个按钮ui组件,供大家学习参考
用vue-cli3搭建ui库(仿elementUI)
潇蓝诺依的博客
10-11 2611
文章目录用vue-cli3初始化项目修改项目结构先写个测试demo1. packages下新建文件夹test,结构如下:2. examples进行测试examples展示markdown文件 用vue-cli3初始化项目 css 选了sass lint 选了ESLint + Prettier vscode 可下载eslint插件,配置保存自动格式化代码 个人配置如下(首选项–>设置) ...
vue-cli3 创建一个Vue的UI组件库类似Element 以及发布
qq_38935512的博客
12-13 1064
1，快速创建一个vue3.0的项目。 2.项目结构 src===改为 examples 新建 packages(放组件) 新建 vue.config.js （这文件vue会自动加载） 3.配置vue.config.js module.exports = { // 修改 src 为 examples pages: { index: { entry:...
仿element ui实现自定义UI插件
杨振洲的博客
10-16 545
有时候我们在做开发的时候，就想自己写一个插件然后就可以使用自己的插件，那种成就感很强。博主最近研究element-ui和axios的时候，发现他们是自定义组件，但是唯一有一点不同的是，在用element-ui的时候是使用Vue.use()语句来使用的，而axios的时候，不用Vue.use()，只要import就可以导入进来了，感觉很神奇，细细的发现，原来他们的不同是因为axios里面并没有写install方法，而element-ui就有写这个方法，下面就利用这个install来写一个自己的插件。 首先看一
Element-UI：Vue2.0组件库，简化前端开发
- 在页面底部的JavaScript部分，创建一个新的Vue实例并将其挂载到ID为`app`的`<div>`上，初始化数据和方法。 ### 3. 在项目中使用Element-UI组件 - 在实际项目中，可以像下面这样在Vue组件模板中使用Element-UI...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值