Vue入门到关门之第三方框架elementui

Element UI 是一款为 Vue.js 设计的后台界面 UI 框架，它提供了丰富的组件，简洁优雅的设计风格，并且容易上手。

以下是如何在 Vue 项目中使用 Element UI 的步骤：

1. 安装 Element UI：

npm install element-ui --save

2. 在 Vue 项目中全局引入 Element UI：

在项目的入口文件（通常是 main.js 或 app.js）中，引入 Element UI 并注册为 Vue 的全局组件：

import Vue from 'vue'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css' // 引入ElementUI样式
 
Vue.use(ElementUI)
 
new Vue({
  el: '#app',
  // ... 其他选项
})

3. 使用 Element UI 组件：

在 Vue 组件中，可以直接使用 Element UI 提供的组件，例如 Button、Form、Table 等：

<template>
  <div>
    <el-button type="primary">点击我</el-button>
    <el-input placeholder="请输入内容"></el-input>
    <el-table :data="tableData">
      <el-table-column prop="date" label="日期"></el-table-column>
      <el-table-column prop="name" label="姓名"></el-table-column>
      <el-table-column prop="address" label="地址"></el-table-column>
    </el-table>
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      tableData: [{ date: '2016-05-02', name: '王小虎', address: '上海市普陀区金沙江路 1518 弄' }]
    }
  }
}
</script>

以上代码展示了如何在 Vue 组件中使用 Element UI 的 Button、Input 和 Table 组件。

注意：在实际项目中，为了避免将整个 Element UI 引入，可以按需引入组件，以减少最终打包文件的大小。这可以通过 webpack 的 babel-plugin-import 插件实现。