【Element入门】1、Element UI 介绍与安装

【Element入门】Element UI 介绍与安装

Element入门系列导航

【Element入门】1、Element UI 介绍与安装（本文）
【Element入门】2、Element UI 的基本使用
【Element入门】3、Element UI 表单组件详解
【Element入门】4、Element UI 布局组件详解
【Element入门】5、Element UI 导航组件详解
【Element入门】6、Element UI 数据展示组件详解
【Element入门】7、Element UI 反馈组件详解
【Element入门】8、Element UI 自定义主题

简介

什么是Element UI

Element UI 是由饿了么前端团队推出的一款基于 Vue 2.0 的桌面端 UI 组件库。它提供了一整套现代化的 UI 组件，帮助开发者快速构建美观且功能强大的 Web 应用。

特点

• 组件丰富：Element UI 提供了大量的基础组件（如按钮、输入框）和高级组件（如表格、树形控件），几乎可以满足所有常见的开发需求。
• 设计美观：它遵循现代化的设计规范，提供了默认的美观主题，同时支持自定义主题，能够很好地适配各种设计需求。
• 文档详尽：Element UI 的文档非常详细，包含了每个组件的用法、参数说明以及示例代码，帮助开发者快速上手。
• 社区活跃：由于其广泛的使用和饿了么团队的维护，Element UI 拥有一个活跃的社区，开发者可以在社区中交流问题和心得。

适用场景

Element UI 主要适用于中后台管理系统的开发，其组件设计和交互方式非常适合数据密集型的应用场景。无论是简单的表单页面，还是复杂的数据展示页面，Element UI 都能提供优秀的用户体验。

安装与配置Element UI

前置条件

在开始安装 Element UI 之前，请确保你的开发环境中已经安装了 Node.js 和 npm 或 yarn。如果还没有安装，可以前往 Node.js 官网 下载并安装最新版本的 Node.js，npm 会随 Node.js 一起安装。

使用 Vue CLI 创建 Vue 项目

如果你还没有 Vue 项目，可以使用 Vue CLI 快速创建一个新的 Vue 项目。首先，全局安装 Vue CLI：

npminstall-g @vue/cli

然后使用 Vue CLI 创建一个新的项目：

vue create my-element-project

按照提示选择项目配置，完成后进入项目目录：

cd my-element-project

安装Element UI

在项目目录下，通过 npm 或 yarn 安装 Element UI：

npminstall element-ui --save

或者使用 yarn：

yarnadd element-ui

全局引入Element UI

在

src/main.js

文件中引入 Element UI 和相关样式：

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

Vue.use(ElementUI);newVue({render:h=>h(App),}).$mount('#app');

这样，Element UI 的所有组件就可以在项目中全局使用了。

按需引入Element UI

如果不想引入所有组件，可以按需引入，以减小项目体积。需要安装

babel-plugin-component

和配置 Babel。

1. 安装 babel-plugin-componentnpminstall babel-plugin-component --save-dev
2. 配置 Babel在 babel.config.js 中添加插件配置：module.exports ={presets:['@vue/cli-plugin-babel/preset'],plugins:[['component',{libraryName:'element-ui',styleLibraryName:'theme-chalk'}]]};
3. 按需引入组件修改 main.js，只引入需要的组件：import Vue from'vue';import{ Button, Select }from'element-ui';import'element-ui/lib/theme-chalk/index.css';Vue.component(Button.name, Button);Vue.component(Select.name, Select);newVue({render:h=>h(App),}).$mount('#app');

使用Element UI组件

现在，我们可以在项目中使用 Element UI 提供的组件了。例如，在

src/App.vue

中添加一个按钮和一个输入框：

<template>
  <div id="app">
    <el-button type="primary">Primary Button</el-button>
    <el-input placeholder="Please input"></el-input>
  </div>
</template>

<script>
export default {
  name: 'App',
};
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

运行项目，可以看到一个美观的蓝色按钮和一个输入框。

配置Element UI主题

默认情况下，Element UI 使用自带的主题样式。如果需要自定义主题，可以使用 Element 提供的主题工具。

1. 安装主题工具npminstall element-theme -gnpminstall element-theme-chalk -D
2. 初始化变量文件et -i这会在项目根目录下生成一个 element-variables.scss 文件，你可以在这个文件中修改 Element UI 的默认样式变量。
3. 编译主题修改 element-variables.scss 文件中的变量后，使用以下命令编译主题：et编译完成后，会在项目的 ./theme 目录下生成主题文件。
4. 引入自定义主题在 src/main.js 中引入编译好的主题文件：import Vue from'vue';import ElementUI from'element-ui';import'../theme/index.css';// 引入自定义主题import App from'./App.vue';Vue.use(ElementUI);newVue({render:h=>h(App),}).$mount('#app');

Element UI的国际化

Element UI 默认使用中文作为界面语言。如果需要使用其他语言，可以进行国际化配置。

1. 安装依赖npminstall vue-i18n
2. 配置国际化在 src/main.js 中进行配置：import Vue from'vue';import ElementUI from'element-ui';import locale from'element-ui/lib/locale/lang/en';// 引入英文语言包import App from'./App.vue';import VueI18n from'vue-i18n';Vue.use(VueI18n);Vue.use(ElementUI,{ locale });const i18n =newVueI18n({locale:'en',messages:{en:{message:{hello:'hello world'}}}});newVue({ i18n,render:h=>h(App),}).$mount('#app');

小结

通过上述步骤，我们已经成功安装并配置了 Element UI，并且展示了如何在 Vue 项目中使用 Element UI 组件。Element UI 提供了丰富的组件和完善的文档，是构建现代化 Web 应用的不错选择。无论是全局引入还是按需加载，Element UI 都能满足不同的项目需求。此外，通过自定义主题和国际化配置，Element UI 可以适配各种设计和语言的需求。

希望这篇文章对你有所帮助，祝你在前端开发的道路上越走越远！后续的文章中，我们将详细介绍各类常用组件的使用方法，敬请期待。