需求：修改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"
},之后直接使用组件的内容，而且还可以直接修改源码就能看到效果。便于研究源码内容和运行原理
