element-plus组件重写 简单版本

目录

demo准备

创建vue3文件

安装依赖：

安装element-plus包：

main.ts中引入

组件引入

进github找源码

复制组件

修改引入

组件重写

根据需要修改组件

页面引用

页面展示

---

demo准备

创建vue3文件

cmd终端输入命令

npm init vue@latest

按需求自选功能：

安装依赖：

npm i

安装element-plus包：

npm install element-plus --save

main.ts中引入

import { createApp } from 'vue'

import ElementPlus from 'element-plus'

import 'element-plus/dist/index.css'

import App from './App.vue'

const app = createApp(App)

app.use(ElementPlus)

app.mount('#app')

组件引入

在element-plus组件库中找到所要修改的组件（以el-tag为例）

进github找源码

在这个目录下找对应文件

复制组件

将ts和vue文件都复制到自己的demo中

创建个ele放文件夹，命名tag，把两个文件放到tag中

修改引入

tag.ts中的引入要改一下

github中是这样的：

改成这样：

就是改成从node_modules中去引入

tag.vue也一样

改为

组件重写

根据需要修改组件

（在content后面加 "重写重写" ）

页面引用

正常引入使用组件 

内容： 标签1234

页面展示

完成简单的组件重写

参考文章vue3中修改element plus组件源码并使用，比如自定义额外逻辑的解决思路方式（亲测有效） - 个人文章 - SegmentFault 思否