element-plus 按需导入问题 404等问题

场景

新开一个项目,需要用element-plus这个ui库,使用按需引入。
这是我项目的一些版本号

 "element-plus": "^2.7.6",
 "vue": "^3.2.13",
 "vue-router": "^4.0.3",

过程(看解决方法的可以直接往下拉)

按照官网上输入:npm install -D unplugin-vue-components unplugin-auto-import直接安装,控制台报错显示:

Not Found - GET https://nexus01.authine.cn:443/repository/npm-all/unplugin-vue-components/-/unplugin-vue-components-0.27.2.tgz
npm ERR! 404
npm ERR! 404  'unplugin-vue-components@latest' is not in the npm registry.
npm ERR! 404 You should bug the author to publish it (or use the name yourself!)
npm ERR! 404 It was specified as a dependency of 'fzv_pc_project'

说这个插件并没有注册,找不到这个插件!我懵了,查了下版本号,这么多版本跟我说没有注册!!!!
在这里插入图片描述

控制台输入找不到依赖,然后我去vue ui 安装,安装好后,运行,还是报错!!!!!

显示:AutoImport is not a function

TypeError: Components is not a function

在这里插入图片描述
在这里插入图片描述

解决办法

然后再去百度,下载指定版本,解决

npm install unplugin-auto-import@0.16.1 
npm install unplugin-vue-components@0.25.2

结语

真是一脸懵,官网的语句不能执行,咋没人说过,我百度也没有百度到相关的!还好解决了,浪费我将近3个小时,一直卸载重装删依赖。脑壳都昏了!!!!

### Element Plus引入配置及教程 #### 配置工具介绍 为了实现Element Plus的按加载,可以采用`unplugin-vue-components`和`unplugin-auto-import`两款插件来简化操作过程[^3]。 #### 安装必要的开发依赖包 对于Vite构建工具环境下的Vue 3.x项目而言,除了安装Element Plus本身之外,还要额外安装上述提到的两个Unplugin插件: ```bash npm install element-plus unplugin-vue-components unplugin-auto-import --save-dev ``` #### 修改 Vite 配置文件 (vite.config.js 或 vite.config.ts) 在项目的根目录下找到或创建名为 `vite.config.[js|ts]` 的配置文件,并加入如下内容以便集成这两个插件的功能支持: ```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()] }) ] }) ``` 此部分代码的作用在于通过AutoImport自动导入API接口函数以及借助Components解析器识别并动态注册来自Element Plus库内的UI组件实例对象[^5]。 #### 导入基础样式表 即使启用了按加载机制,在大多数情况下仍然建议显式地将Element Plus的基础CSS框架纳入到应用入口处以确保整体视觉风格的一致性和稳定性。可以在main.ts或者其他合适的初始化脚本里添加下面这行语句完成这项工作: ```typescript // main.ts or equivalent entry file import 'element-plus/theme-chalk/base.css'; ``` 这样做能够有效规避由于缺少默认主题而导致界面显示异常的风险[^2]。 #### 组件使用示例 一旦完成了以上准备工作之后,则可以直接在模板内声明所的具体控件而无再单独执行任何其他形式的手动注册动作了。例如要在一个`.vue`单文件组件中运用Button按钮的话只像这样书写即可: ```html <template> <el-button type="primary">Primary Button</el-button> </template> <script setup lang="ts"> /* No need to manually import ElButton */ </script> ``` 这种做法不仅极大地提高了编码效率而且有助于进一步压缩最终产出物的实际大小从而优化用户体验效果。
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值