如何使用自定义的Element-Plus组件，直接手改源码使用_element-plus 替换组件

element-plus很好用，但是有些地方还是不太完美，比如日期选择之后输入框不失焦，处理起来很麻烦，不如直接改源码
教程在这里
视频来自：
久等的vue3版element组件修改二开全过程终于来了_哔哩哔哩_bilibili

第一步，克隆代码

地址：
https://github.com/element-plus/element-plus
通过downzip或者使用https的方式下载代码

第二步：仓库处理

创建自己的分支 my2.4，用于后续element-plus更新之后合并代码
修改代码：element-plus哪里的代码不满足需求或者有bug，直接修改packages中的Components中的组件代码，之后build代码，会在element的源码中创建dist文件夹，dist中的element-plus文件夹的文件就是修改后的代码。这里以修改按钮为例，在按钮前面或者后面加上文字

pnpm run build
1

第三步：将上述打包的代码复制到自己的项目中

使用方法1：复制文件夹

创建deps文件夹，（和src同级别）
复制上面的dist中的element-plus到deps中
如果之前项目中有element-plus，使用下面的命令卸载

npm uninstall element-plus
1

使用下面的命令安装使用自己的element-plus代码

npm i element-plus ./deps/element-plus
1

之后package.json中会有下面的代码

"dependencies": {
  "element-plus": "file:deps/element-plus",
  "vue": "^3.3.4"
},
1
2
3
4

效果： 在button前面都加了天生我才

使用方法2：复制压缩包

重复上面的步骤，创建deps文件夹，卸载element-plus
在修改好element-plus源码的项目中打包项目
如之前已经产生dist文件夹，可以先删除dist文件夹再pnpm run build执行打包命令
之后在dist文件夹中（注意是dist文件夹）执行下面命令打包

tar zcvf element-plus.tar.gz -C ./element-plus .
1

注意

1. element-plus.tar.gz 是个名字，可以不用这么写
2. -C 是大写的，必须写对，否则放到项目中会报找不到package.json
3. 后面有个点要写上

打包好的element-plus.tar.gz文件放到deps文件夹中，先卸载element-plus，然后再安装使用

npm uninstall element-plus
1

npm i element-plus ./deps/element-plus.tar.gz
1

之后package.json

"dependencies": {
  "element-plus": "file:deps/element-plus.tar.gz",
  "vue": "^3.3.4"
},
1
2
3
4

如果不生效，可以先卸载element-plus再重新安装，例如我直接替换了element-plus.tar.gz压缩包，效果没出来，需要先卸载再重新安装

使用方法3：使用线上的git

把修改好的element-plus文件夹放到git上去，比如github
之后先卸载再安装
这里以下面的链接为了演示用，git的链接来自视频的教程

npm i element-plus https://github.com/sunzsh/my-element-plus.git#2.3.14.1
1

自己修改element-plus代码后使用自动导入

不使用自动导入的话打包的文件比较大
使用了自己写的代码之后无法使用自动导入了，需要再Components中给个参数

import { resolve } from 'path'
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
// 自动引入element-plus
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
import eslintPlugin from 'vite-plugin-eslint'
// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    AutoImport({
      eslintrc: {
        enabled: true,
        filepath: './.eslintrc-auto-import.json',
        globalsPropValue: true
      },
      resolvers: [ElementPlusResolver()], // 两处加上element
      dirs: ['src/store/$store', 'src/api/$api'],
      dts: 'src/auto-import.ts',
      imports: ['vue', 'vue-router']
    }),
    Components({
      resolvers: [ElementPlusResolver({ version: '3' })] // 两处加上element
    }),
    eslintPlugin({
      cache: true
    })
  ],
  resolve: {
    alias: {
      '@': resolve(__dirname, './src')
    }
  },
  //配置代理跨域
  // axios的baseUrl没有使用env这种方式，因此请求的就是vite展示当前项目的时候的地址，然后通过代理跨域的方式转到自己想要的地址
  server: {
    proxy: {
      '/api': {
        target: 'http://syt.atguigu.cn',
        changeOrigin: true
      }
    }
  }
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46

重点部分在

Components({
  resolvers: [ElementPlusResolver({ version: '3' })] // 两处加上element
}),
1
2
3

version 给个数字