如何创建一个项目用于研究element-plus的原理

需求：直接使用element-plus未封装成组件的源码，创建一个项目，可以使用任意的element-plus组件，可以深度研究组件的运行。例如研究某一个效果，如果直接在node_modules修改elment-plus打包之后的那些js、mjs代码，不方便使用也没有效果。

第一步：创建项目

采用vite创建一个test_use_elementplus_code，选择vue和ts，等等不在赘述，之后安装element-plus，（后续替换掉element-plus组件直接使用源码的组件，会出现无样式的问题，需要使用element-plus的css样式，不安装也可以直接引入源码的scss文件，但是需要安装sass，否则会报错），在main.ts中全局引入，在App.vue中做出一个效果

import { createApp } from "vue";
import "./style.css";
import "element-plus/dist/index.css";
import "element-plus/theme-chalk/index.css";
import ElementPlus from "element-plus";
import App from "./App.vue";createApp(App).use(ElementPlus).mount("#app");

<template><ElConfigProvider :locale="zhCn"><h1>测试一下</h1><!-- <RouterView /> --><el-button text type="primary" @click="dialogVisible = true">click to open the Dialog</el-button><el-dialog v-model="dialogVisible" title="Tips" width="30%"><span>This is a message</span><template #footer><span class="dialog-footer"><el-button @click="dialogVisible = false">Cancel</el-button><el-button type="primary" @click="dialogVisible = false">Confirm</el-button></span></template></el-dialog></ElConfigProvider>
</template><script setup lang="ts">
import { ref } from "vue";
import zhCn from "element-plus/es/locale/lang/zh-cn";
const dialogVisible = ref(false);
</script>

不用安装element-plus引入样式的方法，直接使用packages的scss文件，但是需要安装sass依赖

// import "element-plus/dist/index.css";
// import "element-plus/theme-chalk/index.css";
import '/packages/theme-chalk/src/index.scss'

第二步，下载element-plus源码，复制代码

下载地址：https://github.com/element-plus/element-plus

复制上面代码中的packages，到自己的项目，这里采用和src同级别的目录

这里做以下处理：

1、处理路径问题，element-plus源码，中把@element-plus指向了pachkages这个文件夹，我们直接复制过来后，代码中会把@element-plus识别为node_modules中的内容，要通过修改vite.comfig.ts文件，把路径改成packages。

import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
import { URL, fileURLToPath } from "node:url";
// https://vite.dev/config/
export default defineConfig({plugins: [vue()],resolve: {alias: {"@": fileURLToPath(new URL("./src", import.meta.url)),"@element-plus": fileURLToPath(new URL("packages", import.meta.url)),},},
});

2、安装@element-plus/icons-vue，把node_modules的@element-plus/icons-vue复制到packages中，原因：packages中的源码用到了这些图标，没有icons-vue会报错。

3、安装下面的依赖，方法，可以直接复制下面的代码到package.json中的dependencies，然后npm i 或者直接运行项目，vite会提示有依赖没有安装，直接去element-plus源码的package.json中找到，复制进来后npm i

"@ctrl/tinycolor": "^3.4.1","@element-plus/icons-vue": "^2.3.1","@floating-ui/dom": "^1.0.1","@popperjs/core": "npm:@sxzz/popperjs-es@^2.11.7","@types/lodash": "^4.14.182","@types/lodash-es": "^4.17.6","@vueuse/core": "^9.1.0","async-validator": "^4.2.5","dayjs": "^1.11.3","escape-html": "^1.0.3","lodash": "^4.17.21","lodash-es": "^4.17.21","lodash-unified": "^1.0.2","memoize-one": "^6.0.0","normalize-wheel-es": "^1.2.0","@vue/shared": "^3.2.37"

第三步，替换element-plus，运行项目

原
import ElementPlus from "element-plus";
新
import ElementPlus from "/packages/element-plus";