安装Element_yarn_Element UI提供了丰富的组件能帮你提高开发效率

作者：机器人技术佬 | 发布时间：2025-06-30 |

一、安装Element

要在Vue项目中使用Element UI，首先要把它装进来。你可以用npm或者yarn来安装。

方式	命令
npm安装	npm install element-ui --save
yarn安装	yarn add element-ui

安装完成后，Element UI就加入你的项目大家庭了。

二、引入Element

在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)

这种方法把所有组件都引入了，适合你爱用Element UI组件的时候。

按需引入

如果你只想要部分组件，按需引入是个好选择，这样打包后的文件会更小。

先得安装一个插件：babel-plugin-component

npm install babel-plugin-component --save-dev

然后在.babelrc文件里加配置：

"plugins": ["babel-plugin-component"]

接着在main.js里按需引入组件：

import Vue from 'vue'

import { Button, Select } from 'element-ui'



Vue.use(Button)

Vue.use(Select)

这样，就只会加载Button和Select组件了。

三、使用组件

引入Element UI后，你就可以在Vue组件里用它的组件了。比如，用Button和Select组件做个按钮和选择框：

<template>

  <div>

    <el-button>按钮</el-button>

    <el-select>

      <el-option label="选项1" value="1"></el-option>

      <el-option label="选项2" value="2"></el-option>

    </el-select>

  </div>

</template>

根据官方文档，你可以使用更多的组件和功能。

四、定制主题

Element UI还支持主题定制，你可以根据自己的需求来调整样式。

首先安装个工具：

npm install less less-loader --save-dev

npm install element-theme-chalk --save-dev

然后生成并编辑变量文件：

./node_modules/.bin/element-cli theme

这会在项目根目录下生成一个element-variables.scss文件，你可以在这里自定义样式。

最后编译主题：

./node_modules/.bin/element-cli build

会生成一个theme文件夹，包含编译后的样式文件，你可以在你的项目中引入这个自定义的主题样式。

五、实例说明

我们来做个实例，看看怎么在Vue项目中使用Element UI的表单组件来创建一个登录表单。

按照之前的步骤安装并引入Element UI。

然后在App.vue文件里写代码：

<template>

  <el-form>

    <el-form-item label="用户名">

      <el-input v-model="username"></el-input>

    </el-form-item>

    <el-form-item label="密码">

      <el-input type="password" v-model="password"></el-input>

    </el-form-item>

    <el-form-item>

      <el-button type="primary" @click="login">登录</el-button>

    </el-form-item>

  </el-form>

</template>

在这个例子中，我们使用了Element UI的Form、FormItem、Input和Button组件来创建一个简单的登录表单。用户可以输入用户名和密码，然后点击登录按钮来提交表单。

六、总结

通过这些步骤，你可以看到在Vue项目中使用Element UI其实很简单，只要装了、引入了、用了，就能享受到它的便利。Element UI提供了丰富的组件，能帮你提高开发效率。如果你需要更多的自定义功能，可以查看官方文档来深入了解。