vue 3.0使用element-plus按需导入方法以及报错解决,
3672Js.Com2024-03-23 02:01 来源:未知 阅读:9406 关注度4
vue 3.0使用element-plus按需导入方法以及报错解决,
目录
- 使用方法
- 安装组件库
- 按需导入
- vue.config.js配置
- 报错解决
- 报错 1:AutoImport is not a function
- 报错2:Components is not a function
- 附: 全局引入
- 总结
使用方法
安装组件库
npm install element-plus -S
按需导入
安装按需导入相关的依赖
npm install -D unplugin-vue-components unplugin-auto-import
vue.config.js配置
在 vue 里面配置,不能把官网提供的代码直接复制过来,需要调整一下。先引入相关依赖,plugins 外面加多一个configureWebpack对象
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({ transpileDependencies: true, configureWebpack: { plugins: [ AutoImport({ resolvers: [ElementPlusResolver()], }), Components({ resolvers: [ElementPlusResolver()], }), ], }, });
报错解决
报错 1:AutoImport is not a function
解决:是 unplugin-auto-import版本高了,我用的0.17.3。后面降版本,改成0.16.7,这个问题就不报错了。
报错2:Components is not a function
解决:unplugin-vue-components 版本也高了,从0.26.0 降到了 0.25.2 ,就能正常运行了
附: 全局引入
一种引入element-plus的方式是全局引入,代表的含义是所有的组件和插件都会被自动注册:
//main.ts import { createApp } from 'vue'; import App from './App.vue'; import ElementPlus from 'element-plus' import 'element-plus/dist/index.css' import router from './router' import store from './store' createApp(App).use(router).use(store).use(ElementPlus).mount('#app')
总结
到此这篇关于vue 3.0使用element-plus按需导入方法以及报错解决的文章就介绍到这了,更多相关vue 3.0使用element-plus按需导入内容请搜索3672js教程以前的文章或继续浏览下面的相关文章希望大家以后多多支持3672js教程!
您可能感兴趣的文章:- vue-cli创建项目时由esLint校验导致报错或警告的问题及解决
- vue运行报错cache-loader的解决步骤
- vue3项目中配置sass,vite报错Undefined mixin问题
- vue使用@include或@mixin报错的问题及解决
- 解决vue创建项目使用vue-router和vuex报错Object(...)is not a function
本站文章为3672js教程网友分享投稿,版权归原作者,欢迎任何形式的转载,但请务必注明出处。同时文章内容如有侵犯了您的权益,请联系我们处理。
评论已被关闭