vue-cli4按需引入element-plus

---

项目说明

【配置环境】

1. vue-cli^4.5.0，创建项目过程请参考 https://cli.vuejs.org/zh/
2. vue^3.0.0， https://v3.cn.vuejs.org/
3. element-plus，https://element-plus.gitee.io/#/zh-CN

注：本文只针对测试过的版本进行讲解，其他版本如有问题，可以留言或修改配置进行测试；

一、步骤

1. 安装 & 配置 element-plus

安装

本项目用到了vue-cli4，官网针对vue-cli4准备了对应的Element plus插件
我们只需安装这个插件，不用再手动单独安装element-plus，插件会帮我们安装好：

vue add element-plus

安装过程中，会有一些流程，问你是否全量安装或是按需引入，选择语言，这些比较简单不再赘述，安装完成插件会自动为我们创建一个plugins文件夹，里面有个element.js文件；

配置

打开element.js文件，写入下面的代码，这是全部可能用到的组件，我们可以注释掉暂时用不到的组件：

import lang from 'element-plus/lib/locale/lang/zh-cn';
import locale from 'element-plus/lib/locale';

import {
  // ElAlert,
  // ElAside,
  // ElAutocomplete,
  // ElAvatar,
  // ElBacktop,
  // ElBadge,
  // ElBreadcrumb,
  // ElBreadcrumbItem,
  ElButton,
  // ElButtonGroup,
  // ElCalendar,
  // ElCard,
  // ElCarousel,
  // ElCarouselItem,
  // ElCascader,
  // ElCascaderPanel,
  // ElCheckbox,
  // ElCheckboxButton,
  // ElCheckboxGroup,
  // ElCol,
  // ElCollapse,
  // ElCollapseItem,
  // ElCollapseTransition,
  // ElColorPicker,
  // ElContainer,
  // ElDatePicker,
  // ElDialog,
  // ElDivider,
  // ElDrawer,
  // ElDropdown,
  // ElDropdownItem,
  // ElDropdownMenu,
  // ElFooter,
  // ElForm,
  // ElFormItem,
  // ElHeader,
  // ElIcon,
  // ElImage,
  // ElInput,
  // ElInputNumber,
  // ElLink,
  // ElMain,
  // ElMenu,
  // ElMenuItem,
  // ElMenuItemGroup,
  // ElOption,
  // ElOptionGroup,
  // ElPageHeader,
  // ElPagination,
  // ElPopconfirm,
  // ElPopover,
  // ElPopper,
  // ElProgress,
  // ElRadio,
  // ElRadioButton,
  // ElRadioGroup,
  // ElRate,
  // ElRow,
  // ElScrollbar,
  // ElSelect,
  // ElSlider,
  // ElStep,
  // ElSteps,
  // ElSubmenu,
  // ElSwitch,
  // ElTabPane,
  // ElTable,
  // ElTableColumn,
  // ElTabs,
  // ElTag,
  // ElTimePicker,
  // ElTimeSelect,
  // ElTimeline,
  // ElTimelineItem,
  // ElTooltip,
  // ElTransfer,
  // ElTree,
  ElUpload,
  // ElInfiniteScroll,
  // ElLoading,
  ElMessage,
  // ElMessageBox,
  // ElNotification,
} from 'element-plus';

const components = [
  // ElAlert,
  // ElAside,
  // ElAutocomplete,
  // ElAvatar,
  // ElBacktop,
  // ElBadge,
  // ElBreadcrumb,
  // ElBreadcrumbItem,
  ElButton,
  // ElButtonGroup,
  // ElCalendar,
  // ElCard,
  // ElCarousel,
  // ElCarouselItem,
  // ElCascader,
  // ElCascaderPanel,
  // ElCheckbox,
  // ElCheckboxButton,
  // ElCheckboxGroup,
  // ElCol,
  // ElCollapse,
  // ElCollapseItem,
  // ElCollapseTransition,
  // ElColorPicker,
  // ElContainer,
  // ElDatePicker,
  // ElDialog,
  // ElDivider,
  // ElDrawer,
  // ElDropdown,
  // ElDropdownItem,
  // ElDropdownMenu,
  // ElFooter,
  // ElForm,
  // ElFormItem,
  // ElHeader,
  // ElIcon,
  // ElImage,
  // ElInput,
  // ElInputNumber,
  // ElLink,
  // ElMain,
  // ElMenu,
  // ElMenuItem,
  // ElMenuItemGroup,
  // ElOption,
  // ElOptionGroup,
  // ElPageHeader,
  // ElPagination,
  // ElPopconfirm,
  // ElPopover,
  // ElPopper,
  // ElProgress,
  // ElRadio,
  // ElRadioButton,
  // ElRadioGroup,
  // ElRate,
  // ElRow,
  // ElScrollbar,
  // ElSelect,
  // ElSlider,
  // ElStep,
  // ElSteps,
  // ElSubmenu,
  // ElSwitch,
  // ElTabPane,
  // ElTable,
  // ElTableColumn,
  // ElTabs,
  // ElTag,
  // ElTimePicker,
  // ElTimeSelect,
  // ElTimeline,
  // ElTimelineItem,
  // ElTooltip,
  // ElTransfer,
  // ElTree,
  ElUpload,
];

const plugins = [
  // ElInfiniteScroll,
  // ElLoading,
  ElMessage,
  // ElMessageBox,
  // ElNotification
];

export default (app) => {
  locale.use(lang);

  components.forEach((component) => {
    app.component(component.name, component);
  });

  plugins.forEach((plugin) => {
    app.use(plugin);
  });
};

2. 安装 & 配置 babel-plugin-import

安装

接下来我们安装babel-plugin-import，有了它我们可以只引入需要的组件，以达到减小项目体积的目的：

npm install babel-plugin-import -D

配置

打开babel.config.js文件，写入下面的代码：

module.exports = {
  presets: ['@vue/cli-plugin-babel/preset'],
  plugins: [
    [
      'import',
      {
        libraryName: 'element-plus',
        customStyleName: (name) => `element-plus/packages/theme-chalk/src/${name.slice(3)}.scss`,
      },
    ],
  ],
};

3.创建vue页面

views文件夹下创建Message.vue文件，写入代码：

<template>
  <el-button :plain="true" @click="open">打开消息提示</el-button>
</template>

<script>
import { getCurrentInstance } from 'vue';

export default {
  name: 'Message',
  setup() {
    const internalInstance = getCurrentInstance();
    const that = internalInstance.appContext.config.globalProperties;

    function open() {
      that.$message({
        message: '这是一小段message',
      });
    }

    return {
      open,
    };
  },
};
</script>

这里需要注意下，本项目是全局按需引入，官方有说明：

我们这次用了vue3中的setup组合函数，setup是不能用this的，所以我们用getCurrentInstance来获取实例；

---

总结

完整代码，请到项目 demo 地址：https://gitee.com/feiyunan/blog-demo/tree/master/demo_02