久等的vue3版element组件修改二开全过程终于来了
element plus是基于vue
的组合式代码风格进行开发的
所以我们几乎没办法
通过继承来修改或者定制化它的组件
所以呢这种情况我们就只剩下一条路
就是我们基于它官方的源代码
进行二次开发
顶多呢
就是我们定期的合并它官方的发行版
其实很简单
首先呢我们先把他的原代码克隆下来
这块我已经克隆好了在这里哈
然后呢我们先做一件事
就是我们创建一个分支
（我这里叫：my2.3）
为什么呢
因为大家看他现在的最新发
行版是2.3.
我们呢就不要最后这个小版本了
我们直接到2.
以后的话呢
我们定期合并它这个小版本
比如它2.3.15发布了
我们还把它的2.3.15合并
到我们这个2.3的分支里
然后
就简单了
我们就任意的改它的原代码就好了
改完之后怎么办呢
我们用pnpm
注意它用的是pnpm（包括install的时候）
然后pnpm build
build完之后呢（我这已经build好了）
它会生成一个dist目录
目录里有一个这个element plus目录
这个目录就是未来我们项目
需要引用的那个
element plus
怎么把它引用到项目里呢
我给大家分享3种方式
大家根据自己的情况去选择
第一种呢就是我们把整个这个目录啊
放到我们的项目里边
我这块呢已经放过来了
我建了一个叫deps的目录
把刚才那个目录copy过来
我这已经copy好了哈
下边这个先不管他
然后怎么做呢大家看我现
在用的是一个普通的button
就这一个普通的button
然后呢
大家看啊，我（刚才）把它源码里稍微做了修改
在这加了三个等号
就是在这个文字前面（slot前面）
然后呢我现在重新安装一下element plus
用我打包过来这个安装首先呢
大家看啊这块引用的是官方的element plus
我先把它卸载掉
uninstall
好没有了对吧然后呢重新进行install
element plus注意后边加空格点deps
然后element-plus
这样就可以了指向这个目录哈
我们回车
OK大家看
这块的路径就变成这样的了
我们再来试一下npm run dev
刷新一下
大家看他前面就有这三个等号了
说明现在用的这个button
就是我们刚才改过源码的那个button了
那第二个方法呢就是
大家也看到了
我们需要把刚才这个element plus
目录打包成
tar.gz文件
怎么做呢
就是tar zcvf
然后呢起个名
然后注意有一杠大写的c
然后呢选中刚才这个目录最后有个点
注意这个杠c很重要
这样的话
它生成的这个压缩包中
不会有这个element plus这个目录（这一及级）
否则的话
你在NPM安装的时候
总会报找不到package
好这样打包完之后呢
它就有这个文件了哈
我们把这个文件
放到我们其他的项目里
像这样deps
然后
.tar.gz
（然后这会我们把这个文件先删掉哈）
（我们为了测试）
停一下
然后还是我们先把这个uninstall一下
卸载一下
好我们重新安装i
element plus这回我们.tar.gz
好安装好了，npm run dev
我们再来试一下
刷新一下
大家看也是一样的效果
那这个方法相比直接复制目录过来
有两个好处
第一就是（项目源码的）磁盘空间
我试了一下
（项目源码）他大概节省了10倍的磁盘空间
第二个呢就是这种压缩包
我们可以
避免不小心修改到里边的代码
第三种方法就是我们直接把这个目录
放到公司的git私服上面
或者github上面
我这里边拿github举例哈
我在我的github上
创建了一个my element plus
然后呢把这个目录
直接
放上来了
而且我们放上来的时候
注意我们还可以
打tag
比如我这是2.3.14我又加了个.
未来我再改就是点
然后呢
我们还是
（我还是先uninstall一下）
然后呢我们复制
github这个目录HTTP的就可以哈
npm i element-plus
然后把刚才那个链接直接粘过来
就可以了
如果你想带版本就加上井号
2.3.14.
回车
OK安装好了
大家看格式
就自动变成这种GitHub冒号了
大家注意这是note 16版本以后会是这样
14版本的话它就不是这样
它就直接是这样
ssh加上
https://github...
然后呢我们不管他啊
我们再来npm run一下
看下效果
刷新
啊对
这个我刚才打包的是两个减号的版本
不是等号哈
在其他项目做安装的时候这么做
最后更新于
这有帮助吗？