当前位置：首页 > VUE

vue el 实现

2026-02-10 04:29:11VUE

Vue 中使用 Element UI (el) 的实现方法

Element UI 是一套基于 Vue 2.0 的桌面端组件库，提供了丰富的 UI 组件，可以帮助开发者快速构建高质量的网页应用。

安装 Element UI

使用 npm 或 yarn 安装 Element UI：

npm install element-ui --save
# 或
yarn add element-ui

完整引入 Element UI

在 main.js 中全局引入 Element UI：

vue el 实现

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({
  el: '#app',
  render: h => h(App)
})

按需引入 Element UI 组件

如果只需要使用部分组件，可以配置按需引入：

import Vue from 'vue'
import { Button, Select } from 'element-ui'
import App from './App.vue'

Vue.component(Button.name, Button)
Vue.component(Select.name, Select)

new Vue({
  el: '#app',
  render: h => h(App)
})

使用 Element UI 组件示例

在 Vue 组件中使用 Element UI 的按钮和表单：

vue el 实现

<template>
  <div>
    <el-button type="primary">主要按钮</el-button>

    <el-form :model="form" label-width="80px">
      <el-form-item label="活动名称">
        <el-input v-model="form.name"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">提交</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      form: {
        name: ''
      }
    }
  },
  methods: {
    onSubmit() {
      console.log('submit!', this.form)
    }
  }
}
</script>

自定义主题

可以通过修改 SCSS 变量来自定义主题：

新建一个 SCSS 文件，如 element-variables.scss
```
$--color-primary: #ff6600;
```

@import "~element-ui/packages/theme-chalk/src/index";

2. 在项目中引入该文件替代默认 CSS

#### 国际化配置

Element UI 支持多语言，可以这样配置：
```javascript
import Vue from 'vue'
import ElementUI from 'element-ui'
import locale from 'element-ui/lib/locale/lang/en'

Vue.use(ElementUI, { locale })