elementUI相关知识及搭建使用过程

Element UI是一个为Vue.js设计的UI库，提供了丰富的组件，包括表单、表格、布局、按钮、导航等。

安装Element UI

使用npm或yarn安装Element UI：

npm install element-ui --save
# 或者
yarn add element-ui

在Vue项目中使用Element UI

在项目中的入口文件（如main.js）中引入并使用Element UI：

import Vue from 'vue';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
 
Vue.use(ElementUI);
 
new Vue({
  el: '#app',
  // 组件等其他配置
});

简单示例：使用Element UI的Button组件

在Vue组件中使用Button组件：

<template>
  <el-button @click="handleClick">点击我</el-button>
</template>
 
<script>
export default {
  methods: {
    handleClick() {
      alert('按钮被点击');
    }
  }
}
</script>

组件按需引入

如果不希望引入整个Element UI库，可以使用babel-plugin-component进行按需引入。

首先安装babel-plugin-component：

npm install babel-plugin-component -D

然后修改.babelrc或者babel.config.js配置文件：

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

最后在需要的地方单独引入所需组件：

import Vue from 'vue';
import { Button, Select } from 'element-ui';
 
Vue.use(Button);
Vue.use(Select);

这样可以减少打包体积，只引入使用的组件。