项目说明
【配置环境】
- vue-cli^4.5.0,创建项目过程请参考 https://cli.vuejs.org/zh/
- vue^3.0.0, https://v3.cn.vuejs.org/
- 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