如何创建一个项目用于研究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样式），在main.ts中全局引入，在App.vue中做出一个效果

javascript 复制代码

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");

html 复制代码

<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。

javascript 复制代码

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

html 复制代码

"@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，运行项目

javascript 复制代码

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