Element-plus Vue 3自动引入组件ts爆红

原创已于 2025-03-28 13:11:51 修改 · 370 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #前端 #javascript

于 2025-03-28 12:21:49 首次发布

1.Element-Plus自动引入官方教程：快速开始 | Element Plus

2. ts爆红问题

3.解决方法（完成以下操作需要重新打开文件夹）：

tsconfig.app.json文件"include"添加"auto-imports.d.ts"：

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

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

sdblt

关注关注

4
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

vue3自动按需导入 unplugin-auto-import

shi15926lei的博客

11-22

3694

vue3自动按需导入 unplugin-auto-import

vue3的unplugin-auto-import自动引入

weixin_52020362的博客

11-14

1万+

vue3中unplugin-auto-import自动引入

参与评论您还未登录，请先登录后发表或查看评论

Vue3+TypeScript项目中配置自动导入功能，遇到了问题需要详细的配置教程！

最新发布

weixin_68397463的博客

11-08

488

Vue3+TypeScript项目中使用unplugin-auto-import和unplugin-vue-components实现自动导入的完整配置流程。实现完整的自动导入功能，大幅提升开发体验。

记录在TS中,使用autoImport插件自动导入ElMessage组件报错的坑（vite+vue3+element plus + Eslint）

user_12121的博客

03-17

2741

接着回到引用了ElMessage组件的页面查看，结果发生了惊喜，不但问题没解决，反而tsconfig.json还多了一个问题，reference配置出问题了！既然在tsconfig.json中配置include报错，而tsconfig.json中有引用了tsconfig.app.json文件，那我索性在tsconfig.app.json文件中配置include。既然如此，那我就打开了引用的两个路径文件。Ctrl + S保存，问题解决，而且无需再eslint配置文件中声明全局变量！

vue3+ts引入文件爆红问题

weixin_66582617的博客

02-20

5790

爆红问题，那么在tsconfig.json文件中，将moduleResolution：的值更改为node。解决完后，有可能引入ts文件还会存在爆红问题，当出现爆红的时候如引入的routers.ts爆红，最简单的解决办法就是将后缀的.ts给删除掉。如果觉得删除掉.ts影响感官，那可以查看自己的开发工具是否下载了Vetur插件，如果下载了将他禁用，下载新的插件。安装完成后，将开发工具重新启动，一般就可以解决掉引入爆红问题，如果还没有解决，自求多福，我也没遇到过。在vite-env.d.ts文件中添加以下代码。

auto-imports.d.ts是什么文件

m0_57236802的博客

11-10

3983

文件是一个类型定义文件，用于TypeScript项目中。这个文件通常是由一些现代前端开发工具和框架自动生成的，比如Vite、Vue CLI或其他支持自动导入功能的工具。它的主要目的是提供一个类型声明环境，使得在你的项目中自动导入的变量、函数、组件等能够被TypeScript正确识别，从而提供类型检查和智能提示。

基于vite+vue3+pinia+element-plus+ts后台管理系统源码+项目说明.zip

04-12

基于vite+vue3+pinia+element-plus+ts后台管理系统源码+项目说明.zip 基于vite+vue3+pinia+element-plus+ts后台管理系统源码+项目说明.zip 基于vite+vue3+pinia+element-plus+ts后台管理系统源码+项目说明.zip 基于...

精选资源

基于SpringBoot+Mybatis-plus+Vue3+Element-plus的宠物店运营管理平台设计源码

09-29

基于SpringBoot+Mybatis-plus+Vue3+Element-plus的宠物店运营管理平台设计源码随着宠物行业的蓬勃发展，宠物店作为服务行业的一环，需要借助信息化手段提高运营效率和服务质量。本项目旨在设计并实现一个宠物店...

vue3集成Element-plus实现按需自动引入组件

热门推荐

W_Zhulin的博客

05-03

1万+

element-plus正是element-ui针对于vue3开发的一个UI组件库，它的使用方式和很多其他的组件库是一样的，其他类似于ant-design-vue、NaiveUI、VantUI都是差不多的；安装element-plus 首先下载element-plus npm install element-plus 1、第一种方式，使用全局引入引入element-plus的方式是全局引入，代表的含义是所有的组件和插件都会被自动注册，优点：上手快缺点：会增大包的体积在main.t

基于vue3的管理端模板(Vue3 TS Vuex4 element-plus vue-i18n-next Composition-api) vue3-admin vue3-ts-admin.zip

12-01

vue3-composition-admin 是一个管理端模板解决方案，它基于vue3,ts和element-plus，项目均以composition api风格编写。简介项目的基础版本出自于花裤衩大佬的vue-element-admin。版本vue2+js版本vue-element-...

精选资源

vue3 + vite5 + typescript + element-plus 构建的后台管理前端模板的 vue3 版本

04-02

Element-Plus 是一个基于 Vue3 的企业级 UI 组件库，它是 Element UI 的升级版，提供了丰富的界面组件，如表格、按钮、对话框等，使得开发者可以快速构建美观的后台管理系统。Element-Plus 支持 Vue3 的特性，如 ...

vue3实现自动引入

m0_54741495的博客

08-25

1504

在vue3中,使用ref,reactive等api,需要进行如下操作自动引入后的效果。

vue3中使用element-plus的组件，编辑器检查警告爆红找不到名称相关的element组件

qq_41429765的博客

10-18

912

在tsconfig.json中，增加标红框文件配置，目的就是将根目录下包含.d.ts的文件中的匹配项，应用于整个项目的匹配项检查，去除代码检查爆红警告。按照以上配置完之后，当在代码中使用elementplus相关组件的时候，会在根目录下自动生成。在vite.config.js中配置。

vue3+ts+vite配置别名@了，使用@引入文件后代码可以跑但是爆红

wch19960518的博客

03-04

364

【代码】vue3+ts+vite配置别名@了，使用@引入文件后代码可以跑但是爆红。

VUE3 Element Plus 按需自动导入配置

m0_73083866的博客

04-29

240

VUE3 Element Plus 按需自动导入基础文件配置

vue3+vite3+ts使用@alias路径别名爆红解决办法-Cannot find module or its corresponding type declarations

weixin_45597682的博客

09-30

1580

在tsconfig.app.json的compilerOptions下配置paths，目的是告诉编译器，我用一个符号来代替文件地址了~ 最好也把baseUrl也配置了，可以提升查找的速度！注意baseUrl和paths是在compilerOptions里面的，注意缩进！！！

Vue3 （unplugin-auto-import自动导入的使用）

想好了再写！

02-23

2167

【代码】Vue3 （unplugin-auto-import自动导入的使用）

在vue3项目开发中Auto-Import的作用

weixin_43148294的博客

05-29

563

因为在开发过程中我们需要自己去导入ref()、reactive()等响应式说明，重复声明，所以为了减少每个文件中的声明，就引入Auto-Import去解决这个问题。在vite.config.ts中引入AutoImport ，同时配置相关信息。还需要在tsconfig.json文件里加入。最后的auto-imports.d.ts文件。

vue3取消跟踪auto-imports.d.ts，components.d.ts这两个文件的变化

欢迎来到我穿棉裤了的博客

04-23

584

文章转自:原文链接：https://blog.csdn.net/2302_77290281/article/details/143301461。我们每次提交git的时候，auto-imports.d.ts。这样我们的git就不会再追踪这两个文件的变化。在项目.gitignore文件内添加。

vue3 element-plus i按需引入样式

03-19

### Vue3 按需引入 Element-Plus 样式的实现方法为了优化项目的打包体积，在 Vue 3 中可以通过按需加载的方式引入 Element-Plus 的组件及其样式。以下是具体的实现方式： #### 安装依赖首先，需要安装 `unplugin-vue-components` 和 `unplugin-auto-import` 插件，它们可以帮助自动导入所需的组件和 API。 ```bash npm install unplugin-vue-components unplugin-auto-import --save-dev ``` #### 配置 Vite 或 Webpack 如果使用的是 Vite 构建工具，则可以在 `vite.config.js` 文件中进行如下配置；如果是基于 Webpack 的项目，则需要调整对应的插件设置。 ##### 使用 Vite 进行配置在 `vite.config.js` 文件中添加以下内容： ```javascript import { defineConfig } from 'vite' import vue from '@vitejs/plugin-vue' import AutoImport from 'unplugin-auto-import/vite' import Components from 'unplugin-vue-components/vite' import { ElementPlusResolver } from 'unplugin-vue-components/resolvers' export default defineConfig({ plugins: [ vue(), AutoImport({ resolvers: [ElementPlusResolver()], }), Components({ resolvers: [ElementPlusResolver()], }), ], }) ``` 上述代码实现了对 Element-Plus 组件的自动化按需加载功能[^4]。 #### 修改主题颜色（可选）如果希望自定义 Element-Plus 的主题颜色，还需要额外安装 `sass` 并覆盖默认变量文件。执行以下命令以安装 Sass 支持： ```bash npm install sass --save-dev ``` 随后，在项目的入口 CSS 文件中覆盖默认的主题变量。例如： ```scss // 自定义主题颜色 $--color-primary: #ff6700; @use "element-plus/theme-chalk/src/index.scss"; ``` 这样即可完成对样式的定制化处理。 #### 示例代码片段下面是一个简单的例子，演示如何通过按需加载的方式来使用 Button 组件： ```javascript <template> <el-button type="primary">按钮</el-button> </template> <script setup lang="ts"> // 不需要手动 import el-button，因为已经由 unplugin-vue-components 处理 </script> ``` 此方法不仅减少了不必要的模块被包含到最终构建包中的可能性，还提升了开发效率。 ---

Element-plus Vue 3自动引入 组件ts爆红

Element-plus Vue 3自动引入组件ts爆红