制作一个项目用于研究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文件

javascript 复制代码
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都是本地的内容

javascript 复制代码
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,关掉提示

javascript 复制代码
"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

javascript 复制代码
"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"
  },

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

相关推荐
患得患失9494 分钟前
【前端】【vscode】【.vscode/settings.json】为单个项目配置自动格式化和开发环境
前端·vscode·json
飛_6 分钟前
解决VSCode无法加载Json架构问题
java·服务器·前端
YGY Webgis糕手之路3 小时前
OpenLayers 综合案例-轨迹回放
前端·经验分享·笔记·vue·web
90后的晨仔3 小时前
🚨XSS 攻击全解:什么是跨站脚本攻击?前端如何防御?
前端·vue.js
Ares-Wang3 小时前
JavaScript》》JS》 Var、Let、Const 大总结
开发语言·前端·javascript
90后的晨仔3 小时前
Vue 模板语法完全指南:从插值表达式到动态指令,彻底搞懂 Vue 模板语言
前端·vue.js
德育处主任3 小时前
p5.js 正方形square的基础用法
前端·数据可视化·canvas
烛阴3 小时前
Mix - Bilinear Interpolation
前端·webgl
90后的晨仔4 小时前
Vue 3 应用实例详解:从 createApp 到 mount,你真正掌握了吗?
前端·vue.js
德育处主任4 小时前
p5.js 矩形rect绘制教程
前端·数据可视化·canvas