Element-UI安装使用教程(一)

时间：2025-05-08 09:51:55

文章目录

  • Element UI介绍
  • 入门安装
  • 引入 Element
      • 完整引入
      • 按需引入
      • 完整组件列表和引入方式
  • 全局配置
      • 完整引入 Element
      • 按需引入 Element

Element UI介绍

Element-UI是什么？
Element-Ul是饿了么前端团队推出的一款基于 2.0 的桌面端UI框架，手机端有对应框架是Mint UI
官方介绍：Element-Ul是一个网站快速成型工具，一套为开发者，设计师和产品经理准备的基于Vue 2.0的桌面端组件库

入门安装

方法一：npm安装
打开cmd命令，使用cd进入你已经创建好的Vue项目，然后输入下面命令

npm i element-ui -S

注意：如果安装进程一直没变在，像停在某个界面，可以试试更换成淘宝的源，输入下面：

npm config set registry https://registry.npm.taobao.org

配置可通过下面方式验证是否成功：

npm config get registry

更换安装源后再输入安装命令即可：

npm i element-ui -S

方法二：CDN引入

<!-- 引入样式 -->
<link rel="stylesheet" href="/element-ui/lib/theme-chalk/">
<!-- 引入组件库 -->
<script src="/element-ui/lib/"></script>

注：可以通过/element-ui获取到最新版本的资源，在页面上结合js和css文件即可开始使用

引入 Element

完整引入

在 中写入以下内容：

import Vue from 'vue';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/';
import App from './';

Vue.use(ElementUI);

new Vue({
 el: '#app',
 render: h => h(App)
});

注意：样式文件需要单独引入

按需引入

第一步：安装 babel-plugin-component：

npm install babel-plugin-component -D

第二步：将 .babelrc 修改为：

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

第三步：在 中根据自己需要的组件写入相应的内容（例如：引入Button组件）：

import Vue from 'vue';
import { Button} from 'element-ui';
import App from './';

Vue.component(Button.name, Button);
/* 或写为
 * (Button)
 */

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,
  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';

(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 = ;
.$msgbox = MessageBox;
.$alert = ;
.$confirm = ;
.$prompt = ;
.$notify = Notification;
.$message = Message;

全局配置

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

完整引入 Element

mport 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);

现在一个基于 Vue 和 Element 的开发环境已经搭建完毕，现在就可以编写代码了。各个组件的使用方法请查看Elenment-UI官方文档

相关文章