首页 > 其他 > 详细

ElementUI按需引入各种组件

时间:2021-06-13 19:15:42      阅读:39      评论:0      收藏:0      [点我收藏+]

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/cli-plugin-babel/preset
  ],
  "plugins": [
    [
      "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)

 

ElementUI按需引入各种组件

原文:https://www.cnblogs.com/zhuzhaoli/p/14880690.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!