如何创建一个项目用于研究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";

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/diannao/61464.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

SQL进阶技巧:如何进行数字范围统计?| 货场剩余货位的统计查询方法

目录 0 场景描述 1 剩余空位区间和剩余空位编号统计分析 2 查找已用货位区间 3 小结 0 场景描述 这是在做一个大型货场租赁系统时遇到的问题&#xff0c;在计算货场剩余存储空间时&#xff0c;不仅仅需要知道哪些货位是空闲的&#xff0c;还要能够判断出哪些货位之间是连…

菜鸟驿站二维码/一维码 取件识别功能

特别注意需要引入 库文 ZXing 可跳转&#xff1a; 记录【WinForm】C#学习使用ZXing.Net生成条码过程_c# zxing-CSDN博客 using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.Threading.Tasks; using static System.Net.…

2024年亚太地区数学建模大赛D题-探索量子加速人工智能的前沿领域

量子计算在解决复杂问题和处理大规模数据集方面具有巨大的潜力&#xff0c;远远超过了经典计算机的能力。当与人工智能&#xff08;AI&#xff09;集成时&#xff0c;量子计算可以带来革命性的突破。它的并行处理能力能够在更短的时间内解决更复杂的问题&#xff0c;这对优化和…

教程 - 在 Creo Elements/Pro 中使用 Mechanica 分析杆的 von-mises 应力?

这是教程。 步骤1&#xff1a; 在“零件”模式下启动 Creo Elements/Pro。 步骤2&#xff1a; 草绘>>顶平面并绘制一个直径为 20mm 的圆。 步骤3&#xff1a; 将其挤出 200 毫米。 步骤4&#xff1a; 应用>>机械. 步骤5&#xff1a; 单击“确定”&…

ssm框架-spring-spring声明式事务

声明式事务概念 声明式事务是指使用注解或 XML 配置的方式来控制事务的提交和回滚。 开发者只需要添加配置即可&#xff0c; 具体事务的实现由第三方框架实现&#xff0c;避免我们直接进行事务操作&#xff01; 使用声明式事务可以将事务的控制和业务逻辑分离开来&#xff0c;提…

基于单片机的多功能跑步机控制系统

本设计基于单片机的一种多功能跑步机控制系统。该系统以STM32单片机为主控制器&#xff0c;由七个电路模块组成&#xff0c;分别是&#xff1a;单片机模块、电机控制模块、心率检测模块、音乐播放模块、液晶显示模块、语音控制模块、电源模块。其中&#xff0c;单片机模块是整个…

写给Vue2使用者的Vue3学习笔记

&#x1f64b;‍请注意&#xff0c;由于本人项目中引入了unplugin-auto-import的依赖&#xff0c;所以所有的代码示例中均未手动引入各种依赖库&#xff08;ref、reactive、useRouter等等&#xff09; 初始环境搭建 npm init vuelatest模板语法 插值 同 Vue2 <span>…

C# 数据结构之【图】C#图

1. 图的概念 图是一种重要的数据结构&#xff0c;用于表示节点&#xff08;顶点&#xff09;之间的关系。图由一组顶点和连接这些顶点的边组成。图可以是有向的&#xff08;边有方向&#xff09;或无向的&#xff08;边没有方向&#xff09;&#xff0c;可以是加权的&#xff…

短剧系统小程序开发产品设计实例解析

短剧系统小程序开发架构深度解析引言 随着数字娱乐市场的蓬勃发展&#xff0c;短剧因其紧凑的情节、创新的表现形式和便捷的观看体验&#xff0c;迅速吸引了大量观众的关注。作为承载短剧内容的重要平台&#xff0c;短剧系统小程序不仅需要在用户体验、内容管理等方面做到极致&…

AI数字人视频小程序:引领未来互动新潮流

当下&#xff0c;随着人工智能技术的不断创新发展&#xff0c;各类AI系统已经成为了创新市场发展的重要力量&#xff0c;AI文案、AI数字人、AI视频等&#xff0c;为大众带来更加便捷的创作方式&#xff0c;AI成为了一个全新的风口&#xff0c;各种AI红利持续释放&#xff0c;市…

解决vue-pdf的签章不显示问题

在使用vue-pdf 4.3.0时发现上传一般的普通pdf正常预览&#xff0c;但是上传带有红头文件的和和特殊字体的pdf无法正常内容显示&#xff0c;文字丢失问题。 1、查看控制台报错信息 2、缺少字体原因 getNumPages(url) {var loadingTask pdf.createLoadingTask({url: url,//引入…

跨境电商API接口:数据采集与业务集成的核心

跨境电商作为全球贸易的重要组成部分&#xff0c;正随着互联网技术的发展而迅速增长。在这个过程中&#xff0c;API接口扮演了至关重要的角色&#xff0c;它们不仅提高了运营效率&#xff0c;还增强了安全性和用户体验。本文将深入探讨跨境电商API接口的应用、重要性以及面临的…

【linux013】文件操作命令篇 - less 命令

文章目录 less 命令1、基本用法2、常见选项3、交互式键盘命令4、举例5、注意事项 less 命令 less 是 Linux 中强大的文件分页查看命令&#xff0c;比 more 更灵活且功能更强大。less 支持双向滚动、搜索、显示大文件等功能&#xff0c;适用于查看文件内容或管道输出的大量文本…

力扣 无重复字符的最长字串-3

无重复字符的最长字串-3 class Solution { public:// 解决方法&#xff1a;双指针int lengthOfLongestSubstring(string s) { // 如果字符串为空&#xff0c;直接返回0if (s.length() 0)return 0;// 如果字符串不为空&#xff0c;字符串每个字符都不同的情况下&#xff0c;最…

如何在Ubuntu当中利用CloudCompare软件进行点云配准拼接?

1.首先需要安装相应的cloudcompare软件&#xff0c;以下有两种方式&#xff1a;第一种直接在ubuntu的软件商店里搜索CloudCompare软件进行install&#xff0c;我这里已经安装完毕。 方式二&#xff1a;可以直接原码安装&#xff1a; github地址&#xff1a; https://github.co…

贴贴,一款windows剪切板管理软件

贴贴&#xff0c;一款windows剪切板管理软件 软件下载官网 https://tietieapp.com 软件界面 软件界面简洁、信息展示清晰。软件会自动记录你复制过的内容。包括哪个软件复制的、复制的时间。支持图片、文本、文件等多种格式。支持持久化&#xff0c;电脑重启记录仍然存在。支持…

RocketMQ的使⽤

初识MQ 1.1.同步和异步通讯 微服务间通讯有同步和异步两种⽅式&#xff1a; 同步通讯&#xff1a;就像打电话&#xff0c;需要实时响应。 异步通讯&#xff1a;就像发邮件&#xff0c;不需要⻢上回复。 两种⽅式各有优劣&#xff0c;打电话可以⽴即得到响应&#xff0c;但…

初试无监督学习 - K均值聚类算法

文章目录 1. K均值聚类算法概述2. k均值聚类算法演示2.1 准备工作2.2 生成聚类用的样本数据集2.3 初始化KMeans模型对象&#xff0c;并指定类别数量2.4 用样本数据训练模型2.5 用训练好的模型生成预测结果2.6 输出预测结果2.7 可视化预测结果 3. 实战小结 1. K均值聚类算法概述…

JSON,事件绑定

文章目录 JSON事件绑定输入框input和div的内容返回获取dom元素数组还是单个对象for循环为什么要写const那一行&#xff0c;直接写 hobbys[index].checked true;可以吗const不是常量吗&#xff0c;为什么用const声明的element的属性值可以改变&#xff1f; 黑马学习笔记 JSON 定…

学习HTML第三十一天

学习文章目录 七. 普通按钮八. 文本域九.下拉框 七. 普通按钮 注意点&#xff1a;普通按钮的 type 值为 button &#xff0c;若不写 type 值是 submit 会引起表单的提交 八. 文本域 常用属性如下&#xff1a; rows 属性&#xff1a;指定默认显示的行数&#xff0c;会影响文…