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

一只小爪磕
993 阅读4分钟

【Element入门】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：

npm install -g @vue/cli

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

vue create my-element-project

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

cd my-element-project

安装Element UI

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

npm install element-ui --save

或者使用 yarn：

yarn add 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);

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

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

按需引入Element UI

如果不想引入所有组件，可以按需引入，以减小项目体积。需要安装 babel-plugin-component 和配置 Babel。

  1. 安装 babel-plugin-component

    npm install 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);

new Vue({
  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. 安装主题工具

    npm install element-theme -g
npm install 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);

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

Element UI的国际化

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

  1. 安装依赖

    npm install 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 = new VueI18n({
  locale: 'en',
  messages: {
    en: {
      message: {
        hello: 'hello world'
      }
    }
  }
});

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

小结

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

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

avatar
文章
阅读
粉丝