ElementUI按需引入各种组件

ElementUI按需引入各种组件

一、首先按需引入前奏

1. 安装element-ui

   npm i element-ui -S
   

2. .安装按需引入必要插件

   npm install babel-plugin-component -D
   

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

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

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

5. 在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
   
   

6. 在main.js中写入

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

7. 这个博主可以关注了