vue3中按需引入element-plus组件报错:Error: Can‘t resolve ‘element-plus/lib/el-button‘ in ‘D:\vue3\vue3-cms\src
element-plus
element-plus/element-plus: Element Plus 是一个基于 Vue 3 的组件库,提供了丰富且易于使用的 UI 组件,用于快速搭建企业级桌面和移动端的前端应用。
项目地址:https://gitcode.com/gh_mirrors/el/element-plus
免费下载资源
·
安装element-plus:npm install element-plus
在login.vue文件中按需引入ElButton组件,刚开始按照官网这样写:
import {ElButton} from 'element-plus'
export default defineComponent({
components: {
ElButton
}
})
报错:Module not found: Error: Can’t resolve ‘element-plus/lib/el-button’ in ‘D:\vue3\vue3-cms\src\views\login’
然后去官网查看配置,按需引入需要安装下面两个npm包
npm install -D unplugin-vue-components unplugin-auto-import
安装完成之后在vue.config.js中配置如下:
const { defineConfig } = require('@vue/cli-service')
const AutoImport = require('unplugin-auto-import/webpack')
const Components = require('unplugin-vue-components/webpack')
const { ElementPlusResolver } = require('unplugin-vue-components/resolvers')
module.exports = defineConfig({
configureWebpack: {
plugins: [
AutoImport({
resolvers: [ElementPlusResolver()],
}),
Components({
resolvers: [ElementPlusResolver()],
}),
],
},
transpileDependencies: true
})
需要注意使用element-plus时vue-cli版本不能太低,不然会报错“defineConfig不是一个函数‘这种错误。
配置完成之后在vue项目中不用再次引入直接使用就可以
想全局引入可以直接查看官网,比按需引入更简单,官网链接:
https://element-plus.gitee.io/en-US/guide/quickstart.html
GitHub 加速计划 / el / element-plus
23.88 K
15.38 K
下载
element-plus/element-plus: Element Plus 是一个基于 Vue 3 的组件库,提供了丰富且易于使用的 UI 组件,用于快速搭建企业级桌面和移动端的前端应用。
最近提交(Master分支:1 个月前 )
c1863f50
3 个月前
b55163fd
3 个月前
更多推荐
已为社区贡献2条内容
所有评论(0)