vue 3.0使用element-plus按需导入方法以及报错解决
使用方法
安装组件库
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按需导入内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!
相关文章
openlayers6之地图覆盖物overlay三种常用用法(popup弹窗marker标注text文本)
这篇文章主要介绍了openlayers6之地图覆盖物overlay三种常用用法(popup弹窗marker标注text文本),主要讲overlay三种最常用的案例,感兴趣的朋友一起看看吧2021-09-09
最新评论