Vue3 + Element Plus 按需引入

文章目录

1 前言
- 1.1 目的
- 1.2 最终效果
2 准备工作
3 按需引入
- 3.1 安装插件
- 3.2 修改 vite.config.ts 文件
4 其他
- 4.1 ElMessageBox 使用时报错
- - 4.1.1 Eslint 报错： 'ElMessageBox' is not defined.eslint(no-undef)
  - 4.1.2 TS 报错： Cannot find name 'ElMessageBox'
- 4.2 ElMessageBox 弹框样式未生效
- 4.3 图标使用
- 4.4 修改命名空间

1 前言

1.1 目的

Element Plus 使用按需引入，大大缩小打包后的文件大小

1.2 最终效果

自动生成 components.d.ts 文件，并在文件中引入 Element Plus 组件

自动生成 components.d.ts 文件，并在文件中引入 Element Plus API

2 准备工作

安装 Element Plus

# 选择一个你喜欢的包管理器# NPM
$ npm install element-plus --save# Yarn
$ yarn add element-plus# pnpm
$ pnpm install element-plus

3 按需引入

3.1 安装插件

组件按需引入所需插件：unplugin-auto-import 、 unplugin-vue-components
图标按需引入所需插件：unplugin-auto-import 、 unplugin-icons

只需要安装到开发环境

$ pnpm i unplugin-auto-import unplugin-vue-components unplugin-icons -D

3.2 修改 vite.config.ts 文件

4 其他

4.1 ElMessageBox 使用时报错

若修改后还是报错，重启再看看

4.1.1 Eslint 报错： ‘ElMessageBox’ is not defined.eslint(no-undef)

修改 vite.config.ts 配置： AutoImport 增加 eslintrc ，自动生成 .eslintrc-auto-import.json 文件

修改 .eslintrc.js 配置：

4.1.2 TS 报错： Cannot find name ‘ElMessageBox’

修改 tsconfig.json 配置： include 中增加 “./auto-imports.d.ts”

"include": ["src/**/*.ts","src/**/*.d.ts","src/**/*.tsx","src/**/*.vue","./auto-imports.d.ts"
],

4.2 ElMessageBox 弹框样式未生效

使用按需引入后，不能再手动引入 ElMessageBox ，否则会引起样式冲突，需要删除手动引入 ElMessageBox 部分代码

4.3 图标使用

注意，-ep- 是 vite.config.ts 文件中配置的，必须保持一致

<!-- 直接使用 -->
<i-ep-menu /><!-- 嵌套使用 -->
<el-icon><i-ep-menu /></el-icon>

4.4 修改命名空间

将所有el-替换为ep-，一般用于避免样式冲突

使用 ElConfigProvider 包装根组件

<!-- App.vue -->
<template><el-config-provider namespace="ep"><!-- ... --></el-config-provider>
</template>

创建 styles/element/index.scss

// styles/element/index.scss
@forward 'element-plus/theme-chalk/src/mixins/config.scss' with ($namespace: 'ep'
);

导入 index.scss

// vite.config.ts
export default defineConfig({css: {preprocessorOptions: {scss: {// 注意 "styles/element/index.scss" 文件路径是否正确additionalData: `@use "styles/element/index.scss" as *;`,},},},// ...
})

修改 ElementPlusResolver

// vite.config.ts
// ElementPlusResolver 传入 importStyle 参数
ElementPlusResolver({importStyle: 'sass'
})

Vue3 + Element Plus 按需引入 - 自动导入相关推荐

Vue UI 组件库（移动端常用 UI 组件库，PC 端常用 UI 组件库，Element UI基本使用，Element UI按需引入）
文章目录 Vue UI 组件库 7.1 移动端常用 UI 组件库 7.2 PC 端常用 UI 组件库 7.3 Element UI基本使用 7.4 Element UI按需引入 Vue UI 组件库 ...
Element UI 按需引入注意事项，.babelrc 文件修改问题
注意按需引入是可以改标签名字注意最新版的vue脚手架已经将 .babelrc 改为了babel.config.js 要在babel.config.js文件里写:注意最新版脚手架
vue element UI 按需引入找不到.babelrc
这个坑有点无语.... 这个东西新版本改名字了,现在叫babel.config.js 就是图片上这东西 module.exports = {presets: ['@vue/cli-plugin-bab ...
@vue3 element-plus 按需引入，默认英文组件修改为中文
升级到@vue-cli3之后element-ui 也做了相应的升级,这里的版本是:"element-plus": "^1.0.2-beta.44",可能后面的版 ...
针对elementUI 中InfiniteScroll按需引入的一点注意事项
大家为了节省空间,常常进行按需引入来节省空间,这里我给大家来介绍一下element中按需引入无限滚动指令注意的事项. 针对前面element 按需引入的一些配置这里就不再详细介绍了. 那么这里讲的是在 ...
vue_按需引入elment、echarts和路由懒加载，减少打包体积
vue_按需引入elment.echarts 响应慢 element的按需引入 echarts的按需引入路由懒加载我的main文件结束响应慢 25s这个响应和我的拖延症有得一拼 element ...
html页面如何按需导入vant,vue脚手架中使用Vant，实现自动按需引入组件，并将px转换为rem...
偶然间看到一款不错的移动端vue组件库Vant,照着官方文档敲了一下,感觉还是不错的.想着以后的项目中可能会运用到,特此记录下,方便之后使用. 现在很多的组件库为了减小代码包体积,都支持按需加载了.V ...
Vue3.0 + Ts 项目使用element-plus 自动按需导入使用v-loading报错
问题展示: 使用v-loading报错无法找到样式 element-plus/es/components/loading-directive/style/css 解决办法: element-plus ...
vue3.0+ts+element-plus多页签应用模板：element-plus按需引入与动态换肤
目录系列链接一.安装element-plus 二.按需引入 1. 为什么要按需引入? 2. 如何按需引入? 3. 验证是否引入成功三.动态换肤 1. 制作自定义主题 2. 引入自定义主题 3. ...

Vue3 + Element Plus 按需引入 - 自动导入

文章目录

1 前言

1.1 目的

1.2 最终效果

2 准备工作

3 按需引入

3.1 安装插件

3.2 修改 vite.config.ts 文件

4 其他

4.1 ElMessageBox 使用时报错

4.1.1 Eslint 报错： ‘ElMessageBox’ is not defined.eslint(no-undef)

4.1.2 TS 报错： Cannot find name ‘ElMessageBox’

4.2 ElMessageBox 弹框样式未生效

4.3 图标使用

4.4 修改命名空间

Vue3 + Element Plus 按需引入 - 自动导入相关推荐

最新文章

热门文章