【VUE】4、VUE项目中引入Element-UI

1、element-ui 官方文档（中文版）

https://element.eleme.cn/#/zh-CN/component/installation

2、安装 element-ui

• 1、进入项目目录下

cd demo

• 2、安装 element-ui

npm i element-ui -S

注意：VUE2 使用的是 element-ui，VUE3 使用的是 element-plus

3、引入 element-ui（完整引入）

• 1、打开 main.js 文件

在 main.js 文件中，引入 element-ui

importElementUI from 'element-ui';import 'element-ui/lib/theme-chalk/index.css';

• 2、注册 element-ui

Vue.use(ElementUI);

以上代码便完成了 Element 的引入。需要注意的是，样式文件需要单独引入。

4、引入 element-ui（按需引入）

• 1、安装 babel-plugin-component

借助 babel-plugin-component，我们可以只引入需要的组件，以达到减小项目体积的目的。首先，安装 babel-plugin-component：

npm install babel-plugin-component -D

• 2、修改 .babelrc 文件

将 .babelrc 修改为：

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

• 3、打开 main.js 文件

如果你只希望引入部分组件，比如 Button 和 Select，那么需要在 main.js 中写入以下内容：

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

完整组件列表和引入方式（完整组件列表以 components.json 为准）：

importVue 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,Spinner,Badge,Card,Rate,Steps,Step,Carousel,CarouselItem,Collapse,CollapseItem,Cascader,ColorPicker,Transfer,Container,Header,Aside,Main,Footer,Timeline,TimelineItem,Link,Divider,Image,Calendar,Backtop,PageHeader,CascaderPanel,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(Spinner);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(Timeline);Vue.use(TimelineItem);Vue.use(Link);Vue.use(Divider);Vue.use(Image);Vue.use(Calendar);Vue.use(Backtop);Vue.use(PageHeader);Vue.use(CascaderPanel);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;

5、全局配置

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

• 1、完整引入 Element：

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

• 2、按需引入 Element：

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

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

至此，一个基于 Vue 和 Element 的开发环境已经搭建完毕，现在就可以编写代码了。各个组件的使用方法请参阅它们各自的文档。

如您在阅读中发现不足，欢迎留言！！！