vue3-element-plus按需引入

最新推荐文章于 2024-07-27 22:52:36 发布

lxslxskxs

最新推荐文章于 2024-07-27 22:52:36 发布

阅读量815

点赞数

分类专栏： vue 文章标签： vue.js elementui javascript

本文链接：https://blog.csdn.net/lxs19930928/article/details/122030441

版权

vue 专栏收录该内容

27 篇文章 4 订阅

订阅专栏

项目目录

在这里插入图片描述

下载element-plus

 yarn add -D element-plus

新建plugins文件夹

新建element-plus.js文件夹

import { ElButton } from "element-plus";

const components = [ElButton]
export const componentsPlugin = app => components.forEach(app.use, app)

import { Edit,Search } from '@element-plus/icons'  //图标需要分开导入，按需导入图标
//注册图标组件
let iconComponent = [Edit,Search]
export const componentIcon = app =>{
  iconComponent.forEach(item =>{
    console.log("item",item);
    app.component(item.name,item)
  })
}

新建index.js

import router from "@/router/index";
import store from "@/store/index";
import {componentsPlugin} from './element-plus'
const components = [router, store,componentsPlugin];
export const usePlugin = app =>
	components.forEach(app.use, app)

// export const componentsPlugin = (app) => {
//   components.forEach((item) => {
//     app.use(item);
//   });
// };

main.js

import { createApp } from "vue";
import App from "./App.vue";
import { usePlugin } from './plugins/index'
import { componentIcon } from './plugins/element-plus'
const app = createApp(App)

usePlugin(app) // element-plus组件
componentIcon(app) // element-plus 图标组件


app.mount("#app")

下载 yarn add -D unplugin-vue-components

vue.config.js

const Components = require("unplugin-vue-components/webpack");
const { ElementPlusResolver } = require("unplugin-vue-components/resolvers");

module.exports = {
  lintOnSave: false,
  configureWebpack: {
    plugins: [
      Components({
        resolvers: [ElementPlusResolver()],
      }),
    ],
  },
};