目录

1.借助 babel-plugin-component ，引入我们需要的组件，减少项目体积

2.修改 babel.config.js 的内容

3.创建文件 element.js(名字自定义)

4.在 main.js 中引入element.js文件

5.在需要的页面使用el-标签名进行使用即可

写在最后

1.借助 babel-plugin-component ，引入我们需要的组件，减少项目体积

npm install babel-plugin-component --save-dev

2.修改 babel.config.js 的内容

//babel.config.js 全文内容如下module.exports = {presets: ['@vue/cli-plugin-babel/preset'],plugins: [['component',{libraryName: 'element-ui',styleLibraryName: 'theme-chalk'}]]}

3.创建文件 element.js(名字自定义)

// element.js 全文内容如下，按自己需要引入就好了import Vue from 'vue'import {Button,Form,FormItem,Input,Message,Container,Header,Aside,Main,Menu,Submenu,MenuItem,Breadcrumb,BreadcrumbItem,Card,Row,Col,Table,TableColumn,Switch,Tooltip,Pagination,Dialog,MessageBox,Tag,Tree,Select,Option,Cascader,Alert,Tabs,TabPane} from 'element-ui'Vue.use(Button)Vue.use(Form)Vue.use(FormItem)Vue.use(Input)Vue.use(Container)Vue.use(Header)Vue.use(Aside)Vue.use(Main)Vue.use(Menu)Vue.use(Submenu)Vue.use(MenuItem)Vue.use(Breadcrumb)Vue.use(BreadcrumbItem)Vue.use(Card)Vue.use(Row)Vue.use(Col)Vue.use(Table)Vue.use(TableColumn)Vue.use(Switch)Vue.use(Tooltip)Vue.use(Pagination)Vue.use(Dialog)Vue.use(Tag)Vue.use(Tree)Vue.use(Select)Vue.use(Option)Vue.use(Cascader)Vue.use(Alert)Vue.use(Tabs)Vue.use(TabPane)Vue.prototype.$message = MessageVue.prototype.$confirm = MessageBox.confirm

4.在 main.js 中引入element.js文件

//main.js 中添加下面这行代码（路径和文件名按自己的来）import './plugins/element.js'

5.在需要的页面使用el-标签名进行使用即可

写在最后

ElementUI框架官网地址：http://element-cn.eleme.io/#/zh-CN/component/installation

常见命令缩写：

i: 安装指令，全拼：install-S:生产环境，全拼：--save-D:开发环境，全拼：--save--dev-O:可选依赖，全拼：--save--optional-E:精确安装指定模块版本，全称：--save--exact-g：全局安装，全拼：--global