ElementUI是一款基于Vue.js的组件库，提供了丰富的UI组件和样式，可以用于快速构建各种Web应用程序。在使用ElementUI时，优雅的使用方式可以提高开发效率和用户体验。下面将介绍如何优雅地使用ElementUI组件库。

一、引入ElementUI

首先，我们需要在Vue项目中引入ElementUI。可以通过npm安装：

```

npm install element-ui -S

```

然后在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({

render: h => h(App),

}).$mount('#app')

```

以上代码片段中，我们先通过import声明引入ElementUI和样式文件，然后使用Vue.use()方法注册ElementUI组件库。接着，我们创建一个Vue实例，并将其挂载到HTML页面上。

二、按需引入组件

ElementUI组件库提供了很多UI组件，有时我们并不需要将所有组件全部引入到项目中。按需引入只是使用ElementUI的一种更加优雅的方式。我们可以通过使用babel-plugin-component插件来实现按需引入。

首先，我们需要安装插件：

```

npm install babel-plugin-component -D

```

接着在.babelrc文件中添加插件配置：

```

{

"plugins": [

[

"component",

{

"libraryName": "element-ui",

"styleLibraryName": "theme-chalk"

}

]

]

}

```

以上配置中，我们设置"libraryName": "element-ui"表示只引入ElementUI组件库。如果你还用于其他UI组件库，可以添加多个"libraryName"字段。"styleLibraryName": "theme-chalk"表示按需引入的组件主题样式。

在需要使用UI组件的Vue组件中，只需引入需要的组件即可，例如：

```