vue-cli4按需引入element-plus

文章目录

  • 项目说明
  • 一、步骤
      • 1. 安装 & 配置 element-plus
          • 安装
          • 配置
      • 2. 安装 & 配置 babel-plugin-import
          • 安装
          • 配置
      • 3.创建vue页面
  • 总结


项目说明

【配置环境】

  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

你可能感兴趣的:(Vue,vue,elementui)