vue3+element-plus（elementui3）实现按需导入

最新推荐文章于 2024-11-13 11:52:56 发布
最新推荐文章于 2024-11-13 11:52:56 发布
阅读量205 收藏 1
点赞数
文章标签： vue.js elementui 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wocao2dai/article/details/130228320
版权
文章讲述了作者在整合Element-Plus库时遇到的困扰，主要关于Vite和Webpack配置的混淆。作者最终发现错误地将vue.config.js的内容与webpack.config.js混为一谈。解决方案是删除vue.config.js中无关的设置，并将webpack.config.js的内容正确地迁移到vue.config.js中，以确保项目配置的正确性。
摘要由CSDN通过智能技术生成

真的是服了，找了很久才找到怎么实现的。因为element-plus官网是写的Vite和Webpack的方式，后面我看源码和视频都没有找到合适的，后面很久才解决。

webpack.config.js==vue.config.js

所以，先把vue.config.js里面的删了。然后直接把webpack.config.js里面的内容复制到vue.config.js就行了。

萝卜头888
关注
vue3+element-plus - 最新详细实现将表格Table组件 “所见所得导出“ 为excel(xls/xlsx)电子表格文件，表格中的图片图像、图标等媒体资源完美导出显示（详细示例代码）
高级前端工程师
07-22 3982
vue3，nuxt3，element plus，表格组件，Table，el-table，导出，下载，excel，电子工作簿，xls，xlsx，将表格导出成xls，如何把表格原封不动的导出成excel，保留图片，带图片，图标，如何导出包括含有图片的Excel表格，图片和表格数据导出excel，把表格导出成excel格式，表格内的图片一起导出，vue3导出图片和数据到Excel，可导出图片，导出图像到Excel，网页上的图片怎么能导出到xls表格中，显示图片url链接，图片太多导出失败，图片会超出单元格，图片不
Vue3按需引入ElementUI
yh0016的博客
04-19 3356
Vue3按需引入ElementUI 这里记录下新构建的项目按需引入ElementUI 1、npm install --save element-ui 2、npm install babel-plugin-component -D 3、在 babel.config.js文件里如下图 module.exports = { presets: [ "@vue/cli-plugin-babel/preset",//这行是默认有的，其余是要加的。 ["@babel/preset-env", { m
Elemenui 引入Vue3.x
damoguyingyq的博客
03-23 1540
element ui 3.x
vue-cli3配置elementui按需引入
weixin_43623808的博客
11-30 1265
vue-cli3配置elementui按需引入 安装babel-plugin-component npm install babel-plugin-component -D 在babel.config.js加入 plugins: [ //按需引入配置 [ "component", { "libraryName": "element-ui", "styleLibraryName": "theme-chalk" } ]
在Vue3 vue-cli4 中配置按需加载Element Plus 及 Invalid options in vue.config.js: “plugins“ is not allowed 错误的处
qq_40011214的博客
11-04 3074
创建项目的过程我就详细描述了，直接从element plus 的引入说起 一、按照官网的三种方式引入 element 二、安装所需插件 npm install unplugin-vue-components 三、创建vue.config.js文件 按照官网方式写入如下代码 const Components = require('unplugin-vue-components/webpack') const { ElementPlusResolver } = requir..
vue 3.0 使用element-plus按需导入方法和报错解决
曈欣的博客
12-31 4877
TypeError: AutoImport is not a function ；TypeError: Components is not a function
Vue3 + Vite+ Element-Plus + TypeScript 搭建系统
weixin_45044818的博客
12-04 1491
一种新的专门的编程语言，编译后成正常的CSS文件。为CSS增加一些编程的特性，无需考虑浏览器的兼容问题，让CSS更加简洁，适应性更强，可读性更佳，更易于代码的维护等诸多好处。创建 variables.scss 变量文件，注意规范变量以 $ 开头 @styles/variables.scss。上面导出的scss全局变量在ts不生效的，需要创建一个以.module.scss 结尾的文件。添加scss @styles/normalize.scss。vite导入variables.scss。
HTML-引入Vue3和Element Plus
04-24
Vue3是Vue.js的最新版本，提供了许多性能优化和新特性，而Element Plus则是一个基于Vue3的高质量UI组件库，能够帮助开发者快速构建美观的用户界面。 首先，我们需要在HTML文件（如`index.html`）中引入Vue3。Vue3...
VUE.js+element-ui实现JSON编辑器
02-17
在本项目“VUE.js+element-ui实现JSON编辑器”中，我们将探讨如何利用这两者来创建一个在线的JSON编辑工具。 首先，让我们详细了解JSON（JavaScript Object Notation）编辑器。JSON是一种轻量级的数据交换格式，...
Vue3+Element-plus配合xlsx插件导入导出Excel、Xlsx
AlarmDog的博客
11-03 628
【代码】Vue3+Element-plus配合xlsx插件导入导出Excel、Xlsx。
搭建vue3项目+按需引入element-ui框架组件
????鱼干～
04-10 8324
搭建vue3项目+按需引入element-ui框架组件
vue3中按需引入element-ui并配置
weixin_55975880的博客
03-21 1473
如果对打包后的文件大小不是很在乎，那么使用完整导入会更方便，这里推荐使用按需引入。
Vue3项目中引入ElementUI使用详解
热门推荐
蓑笠翁
06-18 4万+
Vue3项目中引入 ElementUI详解，ElementPlus引入使用。
Vue3使用ElementUI按需自动引入
无心
08-29 1745
完。
Vue3如何使用Element-Ui？Element-Plus#按需导入
蓝斑.json的博客
05-05 1114
Vue3是不能直接使用Element-ui了，需要换成Element-plus。这里就是Element-plus的官方文档了。老规矩：如果是新的Vue3项目那么可以直接把下面的代码直接拿走。如果是新的Vue3项目那么可以直接把下面的代码直接拿走。安装完成之后，看到这个版本型号就算是真正安装成功啦。安装完成后找到vue.config.js。但是现在字体图标组件库还是不能够使用的。老规矩废话、少说直接安装依赖。，才能够直接在项目里使用。Vue3如何使用Element-Ui？Element-Plus#按需导入
深入解析Javascript中的this指向
最新发布
m0_62652709的博客
11-13 615
this是什么？它的值是如何决定的？为什么在 Vue2 开发中会给this单独定义一个变量？this是动态绑定的，指向取决于调用的上下文。在 Vue2 中，常见的this丢失场景包括回调函数和普通函数。解决方案：使用保存引用。使用箭头函数（推荐）。
Vue中的常用指令
m0_62388400的博客
11-12 965
指令（Directives）是 Vue 提供的带有的 特殊 标签。为啥要学：提高程序员操作 DOM 的效率。vue 中的指令按照不同的用途可以分为如下 6 大类：内容渲染指令（v-html、v-text）条件渲染指令（v-show、v-if、v-else、v-else-if）事件绑定指令（v-on）属性绑定指令 （v-bind）双向绑定指令（v-model）列表渲染指令（v-for）指令是 vue 开发中最基础、最常用、最简单的知识点。
前端基础面试题·第四篇——Vue（其三）
2301_76380626的博客
11-09 863
Vue中组件定义式可以为其添加一个name属性，这个属性是组件的别名。当时组件被渲染时，Vue DevTools 会显示组件的名称，方便开发者调试，增强调试体验。当组件需要在内部调用渲染自己本身时，需要通过name属性来指定组件名称，否则Vue会报错。给组件命名后，我们可以通过全局注册，在全应用范围内使用该组件。方便了组件的使用，提高了组件复用性。使用keep-alive包裹动态组件时，可以通过include和exclude属性来指定哪些组件需要缓存，哪些组件不需要缓存。
Vue常用加密方式
m0_51431448的博客
11-13 66
消息摘要是从原始数据中通过特定算法计算出的一个固定长度的字符串，这个过程通常被称为哈希函数或散列函数。固定长度：无论输入的数据有多大，输出的消息摘要都有固定的长度。唯一性：理想情况下，不同的输入应该产生不同的消息摘要，虽然在现实中由于哈希碰撞的存在，这并不总是可能的。不可逆性：从消息摘要不能反推出原始数据。高效性：计算消息摘要的过程应该是快速且高效的。
vue3elementui plus按需引入怎么配置国际化
09-03
在 Vue 3 中，使用 Element Plus 按需引入并配置国际化需要进行以下步骤： 1. 首先，安装 Element Plus 和国际化插件： ```bash npm install element-plus npm install vue-i18n ``` 2. 在你的 main.js（或者你的入口文件）中导入所需的模块： ```javascript import { createApp } from 'vue' import App from './App.vue' import ElementPlus from 'element-plus' import 'element-plus/lib/theme-chalk/index.css' import locale from 'element-plus/lib/locale/lang/en' // 可根据需要选择语言包 createApp(App) .use(ElementPlus, { locale }) .mount('#app') ``` 3. 创建一个 i18n.js 文件，用于配置国际化： ```javascript import { createI18n } from 'vue-i18n' const messages = { en: { // 这里是英文语言包的配置 }, zh: { // 这里是中文语言包的配置 } } const i18n = createI18n({ locale: 'zh', // 默认使用中文语言包 messages }) export default i18n ``` 4. 在你的 App.vue 文件中使用国际化： ```vue <template> <div id="app"> <router-view /> </div> </template> <script> import { useI18n } from 'vue-i18n' export default { name: 'App', setup() { const { t } = useI18n() // 在需要使用国际化的地方使用 t 函数 console.log(t('key')) return { t } } } </script> <style> /* 样式 */ </style> ``` 这样就完成了 Element Plus 的按需引入和国际化配置。你可以根据需要修改语言包和翻译内容。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

萝卜头888

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值