网站404页面查询,软件开发报价单,企业网站优化服务,全国备案查询系统需求#xff1a;修改el-tooltip的颜色#xff0c;发现传递参数等方法都不太好用#xff0c;也可以使用打断点的方式#xff0c;但也有点麻烦#xff0c;因此打算直接修改源码#xff0c;把组件逻辑给修改了 第一步下载源码
源码地址 GitHub - ElemeFE/element: A Vue.j… 需求修改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}, 之后直接使用组件的内容而且还可以直接修改源码就能看到效果。便于研究源码内容和运行原理
