Vue中怎样引入Element

秒速五厘米 2023-10-18 10:28 80阅读 0赞

### 引入Element ###

#### 完整引入 ####

在vue项目下的src下的main.js中加入

import Vue from 'vue';
    import ElementUI from 'element-ui';
    import 'element-ui/lib/theme-chalk/index.css';
    import App from './App.vue';
    
    Vue.use(ElementUI);
    
    new Vue({
      el: '#app',
      render: h => h(App)
    });

这样就完成了Element的引入，样式文件需要单独引入。

#### 按需引入 ####

需要借助babel-plugin-component,我们可以只引入需要的组件。

安装babel-plugin-component:

在项目目录下打开cmd，然后输入：

npm install babel-plugin-component -D 或者 cnpm install babel-plugin-component -D

![Image 1][]![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk_size_27_color_FFFFFF_t_70][]

新建vue项目教程：

[https://blog.csdn.net/BADAO\_LIUMANG\_QIZHI/article/details/83409981][https_blog.csdn.net_BADAO_LIUMANG_QIZHI_article_details_83409981]

然后在项目下搜索：.babelrc文件

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk_size_27_color_FFFFFF_t_70 1][]

将其修改为：

{
      "presets": [["es2015", { "modules": false }]],
      "plugins": [
        [
          "component",
          {
            "libraryName": "element-ui",
            "styleLibraryName": "theme-chalk"
          }
        ]
      ]
    }

如果想引入部分组件，比如Button和Select,那么需要在main.js中写入

import Vue from 'vue';
    import { Button, Select } from 'element-ui';
    import App from './App.vue';
    
    Vue.component(Button.name, Button);
    Vue.component(Select.name, Select);
    /* 或写为
     * Vue.use(Button)
     * Vue.use(Select)
     */
    
    new Vue({
      el: '#app',
      render: h => h(App)
    });

完整的组件列表和引入方式：

import Vue from 'vue';
    import {
      Pagination,
      Dialog,
      Autocomplete,
      Dropdown,
      DropdownMenu,
      DropdownItem,
      Menu,
      Submenu,
      MenuItem,
      MenuItemGroup,
      Input,
      InputNumber,
      Radio,
      RadioGroup,
      RadioButton,
      Checkbox,
      CheckboxButton,
      CheckboxGroup,
      Switch,
      Select,
      Option,
      OptionGroup,
      Button,
      ButtonGroup,
      Table,
      TableColumn,
      DatePicker,
      TimeSelect,
      TimePicker,
      Popover,
      Tooltip,
      Breadcrumb,
      BreadcrumbItem,
      Form,
      FormItem,
      Tabs,
      TabPane,
      Tag,
      Tree,
      Alert,
      Slider,
      Icon,
      Row,
      Col,
      Upload,
      Progress,
      Badge,
      Card,
      Rate,
      Steps,
      Step,
      Carousel,
      CarouselItem,
      Collapse,
      CollapseItem,
      Cascader,
      ColorPicker,
      Transfer,
      Container,
      Header,
      Aside,
      Main,
      Footer,
      Loading,
      MessageBox,
      Message,
      Notification
    } from 'element-ui';
    
    Vue.use(Pagination);
    Vue.use(Dialog);
    Vue.use(Autocomplete);
    Vue.use(Dropdown);
    Vue.use(DropdownMenu);
    Vue.use(DropdownItem);
    Vue.use(Menu);
    Vue.use(Submenu);
    Vue.use(MenuItem);
    Vue.use(MenuItemGroup);
    Vue.use(Input);
    Vue.use(InputNumber);
    Vue.use(Radio);
    Vue.use(RadioGroup);
    Vue.use(RadioButton);
    Vue.use(Checkbox);
    Vue.use(CheckboxButton);
    Vue.use(CheckboxGroup);
    Vue.use(Switch);
    Vue.use(Select);
    Vue.use(Option);
    Vue.use(OptionGroup);
    Vue.use(Button);
    Vue.use(ButtonGroup);
    Vue.use(Table);
    Vue.use(TableColumn);
    Vue.use(DatePicker);
    Vue.use(TimeSelect);
    Vue.use(TimePicker);
    Vue.use(Popover);
    Vue.use(Tooltip);
    Vue.use(Breadcrumb);
    Vue.use(BreadcrumbItem);
    Vue.use(Form);
    Vue.use(FormItem);
    Vue.use(Tabs);
    Vue.use(TabPane);
    Vue.use(Tag);
    Vue.use(Tree);
    Vue.use(Alert);
    Vue.use(Slider);
    Vue.use(Icon);
    Vue.use(Row);
    Vue.use(Col);
    Vue.use(Upload);
    Vue.use(Progress);
    Vue.use(Badge);
    Vue.use(Card);
    Vue.use(Rate);
    Vue.use(Steps);
    Vue.use(Step);
    Vue.use(Carousel);
    Vue.use(CarouselItem);
    Vue.use(Collapse);
    Vue.use(CollapseItem);
    Vue.use(Cascader);
    Vue.use(ColorPicker);
    Vue.use(Transfer);
    Vue.use(Container);
    Vue.use(Header);
    Vue.use(Aside);
    Vue.use(Main);
    Vue.use(Footer);
    
    Vue.use(Loading.directive);
    
    Vue.prototype.$loading = Loading.service;
    Vue.prototype.$msgbox = MessageBox;
    Vue.prototype.$alert = MessageBox.alert;
    Vue.prototype.$confirm = MessageBox.confirm;
    Vue.prototype.$prompt = MessageBox.prompt;
    Vue.prototype.$notify = Notification;
    Vue.prototype.$message = Message;

### 全局配置 ###

在引入 Element 时，可以传入一个全局配置对象。该对象目前支持 size 与 zIndex 字段。size 用于改变组件的默认尺寸，zIndex 设置弹框的初始 z-index（默认值：2000）。

#### 完整引入 Element： ####

import Vue from 'vue';
    import Element from 'element-ui';
    Vue.use(Element, { size: 'small', zIndex: 3000 });

####    按需引入 Element： ####

import Vue from 'vue';
    import { Button } from 'element-ui';
    
    Vue.prototype.$ELEMENT = { size: 'small', zIndex: 3000 };
    Vue.use(Button);

按照以上设置，项目中所有拥有 size 属性的组件的默认尺寸均为 'small'，弹框的初始 z-index 为 3000。

[Image 1]: 
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk_size_27_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/2018102610240049.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk=,size_27,color_FFFFFF,t_70
[https_blog.csdn.net_BADAO_LIUMANG_QIZHI_article_details_83409981]: https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/83409981
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk_size_27_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/2018102610241480.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk=,size_27,color_FFFFFF,t_70