Vue--ElementUI组件库

1.概述

Element官网

ElementUI是饿了么前端团队推出的一款基于Vue桌面端UI框架；和Boostrap一样对原生的HTML标签进行了封装、美化，让我们能够专注于业务逻辑而不是UI界面

默认情况下无论我们有没有使用到某个组件，在打包的时候都会将elementUI中所有的组件都打包到我们的项目中，这样就导致了项目体积大，用户访问慢；因此我们可以选择按需导入和按需打包即只会将我们用到的组件导入和打包在我们的项目中

PC端的后台系统适用于ElementUI组件库

---

2.流程

首先通过 vue create xxx 创建好 vue 项目

其次，你可以通过

npm i element-ui -S

以上方式安装 element，接着安装

npm install babel-plugin-component -D

然后在.babelrc 的文件里进行如下修改和配置：

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

再者，也可以通过 vue-cli@3 来安装，前提是你需要在全局先安装 @vue-cli  ，然后进入到你创建的 vue 项目里，通过  vue add element  命令来安装 element

注意：

• Fully import -- 全引用，即一次性将所有的组件全部引入进去
• Import on demand -- 按需加载，即根据自身的需求进入组件

最后，关于语言选择，我们默认选择第一个(简体中文)：

 

 安装完成后，项目目录大致如下：

最后可以在plugins目录下新建一个名为element.js的文件，在该文件里写你需要引用的elementUI组件 ，然后在main.js里引入即可

然后，我们通过 npm run serve 来启动项目：

它会默认为我们添加一个 button 按钮

---

3.案例

下面我们就通过一个简单的案例来了解一下在实际项目中是如何使用 ElementUI 组件的：

App.vue

<template>
  <div id="app">
    <HeadeNav />
    <router-view></router-view>
  </div>
</template>

<script>
import HeadeNav from "./components/HeadNav/index.vue"

export default {
  name: 'app',
  components: {
    HeadeNav
  }
}
</script>

<style>
* {
  margin: 0;
  padding: 0;
}
</style>

src/components/HeadNav/index.vue

<template>
  <div>
      <el-menu :default-active="activeIndex" 
      class="el-menu-demo" 
      mode="horizontal" 
      @select="handleSelect"
      background-color="#545c64"
      text-color="#fff"
      active-text-color="#ffd04b"
      router
      >
          <el-menu-item index='/'>首页</el-menu-item>
          <el-menu-item index='/about'>关于</el-menu-item>
      </el-menu>
  </div>
</template>

<script>
export default {
    data () {
        return {
            activeIndex:"/"
        }
    },
    methods: {
        handleSelect(key,keyPath){
            // console.log(key);
            // console.log(keyPath);
        }
    }
}
</script>

<style>

</style>

src/plugins/element.js

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

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;