vue 2.0项目中如何引入element-ui详解

当我们想利用 Element UI 搭建 Vue 2.0 项目时，首先需要引入 Element UI。下面就是详细的操作步骤：

一、安装 Element UI

Element UI 是一个基于 Vue.js 的桌面端组件库，提供了众多酷炫的组件，且使用方便。我们可以通过 npm 来进行安装 Element UI。

在命令行中执行以下命令：

npm i element-ui -S

二、引入 Element UI

1. Vue-Cli 方案

如果你是采用了 Vue-Cli 方案来创建项目的话，可以在 main.js 文件中导入 Element 的主题文件，并使用 Vue.use() 方法来安装 Element 组件。

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

Vue.config.productionTip = false

Vue.use(ElementUI)

new Vue({
  render: h => h(App)
}).$mount('#app')

可以看出，我们引入 Element 的主题文件和 Element UI 组件，接着使用 Vue.use() 方法安装组件。然后，我们在 Vue 实例中，将其挂载到我们的根实例中即可使用。

1. 按需加载方案

如果不需要引入整个 Element UI，也可以使用按需加载的方式引入组件，并且可以指定需要使用的组件。这里使用 babel-plugin-component 插件来帮助我们实现按需引入的方式。

首先需要安装 babel-plugin-component 插件：

npm install babel-plugin-component -D

之后，打开.babelrc 文件，并修改代码如下：

{
  "presets": [
    "@babel/preset-env"
  ],
  "plugins": [
    [
      "component",
      {
        "libraryName": "element-ui",
        "styleLibraryName": "theme-chalk"
      }
    ]
  ]
}

这里我们要使用 Element 的组件，必须指定插件中的 "libraryName": "element-ui"，如果我们需要使用 Element 的样式，也可以指定 "styleLibraryName": "theme-chalk"。

最后，在使用相应的组件的.vue 文件中，直接导入即可。

import { Button, Form, FormItem, Input } from 'element-ui'

export default {
  components: {
    'el-button': Button,
    'el-form': Form,
    'el-form-item': FormItem,
    'el-input': Input
  }
}

这里我们只导入了 Button、Form、FormItem、Input 四个组件，如果我们需要使用其他组件，也是同样的方式导入即可。

示例1：使用 Element UI 的按钮组件

<template>
  <div>
    <!-- 按钮组件 -->
    <el-button>默认按钮</el-button>
    <el-button type="primary">主要按钮</el-button>
    <el-button type="success">成功按钮</el-button>
    <el-button type="warning">警告按钮</el-button>
    <el-button type="danger">危险按钮</el-button>
  </div>
</template>

示例2：使用 Element UI 的表单组件

<template>
  <el-form ref="form" :model="form">
    <el-form-item label="用户名" prop="name">
      <el-input v-model="form.name"></el-input>
    </el-form-item>
    <el-form-item label="密码" prop="pass">
      <el-input type="password" v-model="form.pass"></el-input>
    </el-form-item>
  </el-form>
</template>

<script>
export default {
  data() {
    return {
      form: {
        name: '',
        pass: ''
      }
    }
  }
}
</script>

以上就是 Element UI 的基本用法，包括了如何安装和使用。