制作一个项目用于研究elementUI的源码

 需求:修改el-tooltip的颜色,发现传递参数等方法都不太好用,也可以使用打断点的方式,但也有点麻烦,因此打算直接修改源码,把组件逻辑给修改了

 第一步下载源码

源码地址

GitHub - ElemeFE/element: A Vue.js 2.0 UI Toolkit for Web

第二步,创建vue项目

使用vuecli创建vue项目,在src下面创建element-ui文件夹,把上面源码的packages文件夹和src文件夹放入elementui中

第三步,处理导入问题

把复制的源码中引入element-ui的源头指向本地的源码内容,需要修改vue.config.js文件

const { defineConfig } = require('@vue/cli-service')
const path = require("path");
module.exports = defineConfig({configureWebpack: {resolve: {alias: {"@": path.resolve(__dirname, "src"),// "element-ui": "2.14.1","element-ui": path.resolve(__dirname, "src/element-ui"),},},},transpileDependencies: true
})

第四步,在main.js中引入

由于上面修改了vue.config.js,这里使用的element-ui都是本地的内容

import Vue from 'vue'
import App from './App.vue'
import ElementUI from 'element-ui/src/index';
import 'element-ui/packages/theme-chalk/src/index.scss';
Vue.config.productionTip = false
Vue.use(ElementUI)
new Vue({render: h => h(App),
}).$mount('#app')

第五步,解决报错

源码中未使用的变量等其他内容,在npm run serve的时候会报错,所以要关掉。在packages.json文件中的eslintConfig写入下面的rules,关掉提示

"rules": {"no-console": "off","no-debugger": "off","no-extra-semi": "off","no-unused-vars": "off","no-undef": "off","no-prototype-builtins": "off","no-useless-escape": "off","vue/multi-word-component-names": "off","vue/no-mutating-props": "off","no-empty": "off","vue/no-unused-components": "off","vue/no-side-effects-in-computed-properties": "off","vue/no-use-v-if-with-v-for": "off","no-case-declarations": "off","vue/return-in-computed-property": "off","vue/valid-v-model": "off"}

第六步,包的处理

源码中有些地方引入了包/依赖,需要安装一下才能使用源码,这里可以直接复制下面的内容,然后重新npm i

"dependencies": {"async-validator": "~1.8.1","core-js": "^3.8.3","deepmerge": "^1.2.0","normalize-wheel": "^1.0.1","resize-observer-polyfill": "^1.5.0","throttle-debounce": "^1.0.1","vue": "^2.6.14"},"devDependencies": {"@babel/core": "^7.12.16","@babel/eslint-parser": "^7.12.16","@vue/cli-plugin-babel": "~5.0.0","@vue/cli-plugin-eslint": "~5.0.0","@vue/cli-service": "~5.0.0","eslint": "^7.32.0","eslint-plugin-vue": "^8.0.3","sass": "^1.35.2","sass-loader": "^10.1.1","vue-template-compiler": "^2.6.14"},

 之后直接使用组件的内容,而且还可以直接修改源码就能看到效果。便于研究源码内容和运行原理

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/bicheng/71109.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【ClickHouse】Ubuntu下离线安装ClickHouse数据库并使用DBeaver连接

目录 0. 安装前准备1 安装ClickHouse1.1 下载安装包1.2 离线安装1.3 配置密码1.4 启动ClickHouse服务 2 DBeaver连接配置2.1 下载ClickHouse驱动2.2 DBeaver配置2.2.1 配置主要参数2.2.2 配置驱动 2.3 常见问题处理2.3.1 修改远程登录配置2.3.2 更新驱动配置 0. 安装前准备 有…

unity学习36:老版的动画 Animation

目录 1 unity关于动画的分为两种 2 旧版动画 Animation 2.1 添加Animation组件 2.2 对应的动画clip 2.3 动画的属性 3 如何做出一个简单动画 3.1 打开老的动画编辑器 3.2 Animation 窗口,拖到下面的game窗口一起 3.3 新建动画 3.4 动画编辑器 3.4.1 时间…

学习数据结构(9)栈和队列上

1.栈的概念 栈是一种特殊的线性表,只允许在固定的一端进行插入和删除元素操作。进行数据插入和删除操作 的一端称为栈顶,另一端称为栈底。栈中的数据元素遵守后进先出(先进先出)的原则 栈的插入操作叫做进栈/压栈/入栈&#xff…

【ESP32指向鼠标】——icm20948与esp32通信

【ESP32指向鼠标】——icm20948与esp32通信 ICM-20948介绍 ICM-20948 是一款由 InvenSense(现为 TDK 的一部分)生产的 9 轴传感器集成电路。它结合了 陀螺仪、加速度计和磁力计。 内置了 DMP(Digital Motion Processor)即负责执…

docker学习---第3步:docker实操大模型

文章目录 1.Images2.Container3.DockerfileENTRYPOINT和CMDCOPY和ADDLABLE、EXPOSE和VOLUME卷中的数据是如何做数据备份的? ARG和ENVHEALTHCHECK 4. Network(本节讲容器与容器之间的通信方案) 跟着b站 胖虎遛二狗学习 Docker动手入门 &…

无人机之无线传输技术!

一、Lightbridge和OcuSync图传技术 Lightbridge技术:这是大疆自主研发的一种专用通信链路技术,使用单向图像数据传输,类似于电视广播塔的数据传输形式。它主要采用2.4GHz频段进行传输,并且可以实现几乎“零延时”的720p高清图像传…

Druid GetConnectionTimeoutException解决方案之一

> Druid版本:v1.2.18 最近项目中经常出现:com.alibaba.druid.pool.GetConnectionTimeoutException: wait millis 120000, active 0, maxActive 128, creating 0, createErrorCount 2,但是其他平台连接这个数据源正常的 于是做了一个实验复…

Ansible批量配置服务器免密登录步骤详解

一、准备工作 192.168.85.138 安装ansible,计划配置到139的免密 192.168.85.139 待配置免密 1. 生成SSH密钥对 在Ansible控制节点生成密钥对,用于后续免密认证: ssh-keygen -t rsa -b 4096 -f ~/.ssh/id_rsa 全部回车默认,无…

使用Python爬虫实时监控行业新闻案例

目录 背景环境准备请求网页数据解析网页数据定时任务综合代码使用代理IP提升稳定性运行截图与完整代码总结 在互联网时代,新闻的实时性和时效性变得尤为重要。很多行业、技术、商业等领域的新闻都可以为公司或者个人发展提供有价值的信息。如果你有一项需求是要实时…

在 PyCharm 中接入deepseek的API的各种方法

在 PyCharm 中接入 DeepSeek 的 API,通常需要以下步骤: 1. 获取 DeepSeek API 密钥 首先,确保你已经在 DeepSeek 平台上注册并获取了 API 密钥(API Key)。如果没有,请访问 DeepSeek 的官方网站注册并申请 …

AI知识库 - Cherry Studio

1 引言: 最近 DeepSeek 很火啊,想必大家都知道,DeepSeek 这个开源的模型出来后,因其高质量能力和R1 的思维链引发了大家本地部署的热潮。我也不例外,本地部署了一个 14B 的模型,然后把,感觉傻傻…

在 CentOS 上更改 SSH 默认端口以提升服务器安全性

🚀 作者主页: 有来技术 🔥 开源项目: youlai-mall ︱vue3-element-admin︱youlai-boot︱vue-uniapp-template 🌺 仓库主页: GitCode︱ Gitee ︱ Github 💖 欢迎点赞 👍 收藏 ⭐评论 …

Unity开发播放视频

Unity开发播放视频 介绍VideoPlayer原理步骤VideoPlayer动态加载 总结 介绍 原生Unity播放视频VideoPlayer播放视频,这里我没有选择使用插件,还有一个播放视频的插件也可以AVPro Video,这里不过多介绍就说一下原生VideoPlayer的基础用法。 …

Next.js【详解】获取数据(访问接口)

Next.js 中分为 服务端组件 和 客户端组件&#xff0c;内置的获取数据各不相同 服务端组件 方式1 – 使用 fetch export default async function Page() {const data await fetch(https://api.vercel.app/blog)const posts await data.json()return (<ul>{posts.map((…

【练习】图论

F. Friendly Group 图中选择一个点-1 边两端点都选择1 边一个端点选择-1 添加链接描述 #include<iostream> using namespace std; #include<vector> #include<cstring> const int N300010; int n,m; vector<int> G[N]; int temp1,temp2; bool vis[N…

【Java集合一】集合概述

一、集合简介 Java 集合框架&#xff08;Collection Framework&#xff09;是 Java 提供的一组用于存储和操作对象的类和接口集合。这些集合类提供了不同的数据结构&#xff0c;使得数据的管理和操作更加方便和高效。 Java 集合框架提供了各种类型的数据结构&#xff0c;如列…

优选驾考小程序

第2章 系统分析 2.1系统使用相关技术分析 2.1.1Java语言介绍 Java语言是一种分布式的简单的 开发语言&#xff0c;有很好的特征&#xff0c;在安全方面、性能方面等。非常适合在Internet环境中使用&#xff0c;也是目前企业级运用中最常用的一个编程语言&#xff0c;具有很大…

什么是平面环形无影光源

平面环形无影光源是一种特殊设计的光源&#xff0c;主要用于消除阴影&#xff0c;提供均匀照明&#xff0c;常见于摄影、显微镜、工业检测等领域。以下是其关键特点和应用&#xff1a; 关键特点 环形设计&#xff1a;光源呈环形&#xff0c;光线从四周均匀照射&#xff0c;减少…

消息队列之-RabbitMq 学习

生产者服务A /消费者服务B 服务A和服务B配置: 依赖 <dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-amqp</artifactId></dependency> yaml spring: rabbitmq:host: ${RABBITMQ_HOST:local…

vue 文件下载(导出)excel的方法

目前有一个到处功能的需求&#xff0c;这是我用过DeepSeek生成的导出&#xff08;下载&#xff09;excel的一个方法。 1.excel的文件名是后端生成的&#xff0c;放在了响应头那里。 2.这里也可以自己制定文件名。 3.axios用的是原生的axios&#xff0c;不要用处理过的&#xff…