vue 3.0使用element-plus按需导入方法以及报错解决

admin JavaScript

2024-03-01 0 716

使用方法

安装组件库

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\’)