ElementUI按需引入各种组件

ElementUI按需引入各种组件
一、首先按需引入前奏

安装element-ui
npm i element-ui -S
安装按需引入必要插件
npm install babel-plugin-component -D

二.修改.babelrc 如果是vueCli3 则修改babel.config.js

module.exports = {
  presets: ["@vue/app"],
  plugins: [
    // element官方教程
    [
      "component",
      {
        libraryName: "element-ui",
        styleLibraryName: "theme-chalk"
      }
    ]
  ]
};

三.在src目录下新建一个文件夹element，在该目录下新建Index.js

在src/element/index.js中按需写

import {
	    Select,
	    Option,
	    OptionGroup,
	    Input,
	    InputNumber,
	    Radio,
	    Tree,
	    Dialog,
	    Row,
	    Col,
	    Checkbox,
	    CheckboxButton,
	    CheckboxGroup,
	    Cascader,
	    Switch,
	    Slider,
	    TimeSelect,
	    TimePicker,
	    DatePicker,
	    Upload,
	    Rate,
	    ColorPicker,
	    Transfer,
	    Form,
	    FormItem,
	    Table,
	    TableColumn,
	    Tag,
	    Button,
	    Progress,
	    Pagination,
	    Badge,
	    Avatar,
	    Alert,
	    Loading,
	    Message,
	    MessageBox,
	    Notification,
	    Menu,
	    MenuItemGroup,
	    MenuItem,
	    Submenu,
	    RadioGroup,
	    RadioButton
	
	} from 'element-ui'
	const element = {
	    install: function(Vue) {
	        Vue.use(Select)
	        Vue.use(Option)
	        Vue.use(OptionGroup)
	        Vue.use(Input)
	        Vue.use(InputNumber)
	        Vue.use(Radio)
	        Vue.use(Tree)
	        Vue.use(Dialog)
	        Vue.use(Row)
	        Vue.use(Col)
	        Vue.use(Checkbox)
	        Vue.use(CheckboxButton)
	        Vue.use(CheckboxGroup)
	        Vue.use(Cascader)
	        Vue.use(Switch)
	        Vue.use(Slider)
	        Vue.use(TimePicker)
	        Vue.use(TimeSelect)
	        Vue.use(DatePicker)
	        Vue.use(Upload)
	        Vue.use(Rate)
	        Vue.use(ColorPicker)
	        Vue.use(Transfer)
	        Vue.use(Form)
	        Vue.use(FormItem)
	        Vue.use(Table)
	        Vue.use(TableColumn)
	        Vue.use(Tag)
	        Vue.use(Button)
	        Vue.use(Progress)
	        Vue.use(Pagination)
	        Vue.use(Badge)
	        Vue.use(Avatar)
	        Vue.use(Alert)
	        Vue.use(Loading)
	        Vue.use(Menu)
	        Vue.use(MenuItem)
	        Vue.use(MenuItemGroup)
	        Vue.use(Submenu)
	        Vue.use(RadioGroup)
	        Vue.use(RadioButton)
	
	
	        Vue.prototype.$message = Message;
	        Vue.prototype.$confirm = MessageBox.confirm;
	        Vue.prototype.$alert = MessageBox.alert;
	        Vue.prototype.$notify = Notification;

	    }
}
export default element

四.在main.js中写入

import 'element-ui/lib/theme-chalk/index.css'
import element from './element/index'
Vue.use(element)

五.原文连接
原文链接