![cover](https://img-blog.csdnimg.cn/img_convert/ebd537c6dc4fd2c4a6f0281be4795ae4.png)
如何使用自定义的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:复制文件夹
创建deps文件夹,(和src同级别)
复制上面的dist中的element-plus到deps中
如果之前项目中有element-plus,使用下面的命令卸载
npm uninstall element-plus
使用下面的命令安装使用自己的element-plus代码
npm i element-plus ./deps/element-plus
之后package.json中会有下面的代码
"dependencies": {
"element-plus": "file:deps/element-plus",
"vue": "^3.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 .
注意
- element-plus.tar.gz 是个名字,可以不用这么写
- -C 是大写的,必须写对,否则放到项目中会报找不到package.json
- 后面有个点要写上
打包好的element-plus.tar.gz文件放到deps文件夹中,先卸载element-plus,然后再安装使用
npm uninstall element-plus
npm i element-plus ./deps/element-plus.tar.gz
之后package.json
"dependencies": {
"element-plus": "file:deps/element-plus.tar.gz",
"vue": "^3.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
自己修改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
}
}
}
})
重点部分在
Components({
resolvers: [ElementPlusResolver({ version: '3' })] // 两处加上element
}),
version 给个数字
![Logo](https://devpress.csdnimg.cn/79de2bf0b7994defa4242ef90d5513fa.jpg)
开放原子开发者工作坊旨在鼓励更多人参与开源活动,与志同道合的开发者们相互交流开发经验、分享开发心得、获取前沿技术趋势。工作坊有多种形式的开发者活动,如meetup、训练营等,主打技术交流,干货满满,真诚地邀请各位开发者共同参与!
更多推荐
所有评论(0)