vue集成element组件

Element-UI是一套基于Vue.js 2.0的组件库，提供了一系列开箱即用的高质量组件，从而加速web开发流程。

要集成Element-UI组件，首先需要使用npm安装element-ui和vue-loader：

npm install element-ui vue-loader -S

然后在Vue项目中引入element-ui：

import Vue from 'vue'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'

Vue.use(ElementUI)

这里需要注意的是，需要引入element-ui的CSS样式文件，否则样式会出现问题。

现在就可以在Vue组件中使用Element-UI的组件了。以下是一个使用element-ui的例子：

在上面的例子中，我们使用了element-ui的el-input和el-button组件，他们的用法和普通的input和button组件类似，只是外观更加美观。在el-button组件中，我们使用了@click事件来响应按钮点击事件。

我们还可以使用element-ui的样式和布局，例如el-container和el-row：

在上面的例子中，我们使用了el-container、el-header、el-main、el-footer、el-row和el-col。其中el-row和el-col提供了方便的网格布局。

除了上面提到的组件和布局，element-ui还提供了许多其他的组件，例如表格、弹窗、下拉菜单等等。具体可以参考element-ui官网提供的文档。