wap视频网站,如何做360网站的排名,桂林最新新闻,wordpress源代码插件需求#xff1a;直接使用element-plus未封装成组件的源码#xff0c;创建一个项目#xff0c;可以使用任意的element-plus组件#xff0c;可以深度研究组件的运行。例如研究某一个效果#xff0c;如果直接在node_modules修改elment-plus打包之后的那些js、mjs代码#xf…需求直接使用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);
templateElConfigProvider :localezhCnh1测试一下/h1!-- RouterView / --el-button text typeprimary clickdialogVisible trueclick to open the Dialog/el-buttonel-dialog v-modeldialogVisible titleTips width30%spanThis is a message/spantemplate #footerspan classdialog-footerel-button clickdialogVisible falseCancel/el-buttonel-button typeprimary clickdialogVisible falseConfirm/el-button/span/template/el-dialog/ElConfigProvider
/templatescript setup langts
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;
