Element UI 目前提供了 56 个组件，分成了 6 大类，分别是基础组件、表单类组件、数据类组件、提示类组件、导航类组件和其他类型组件。作为一个 UI 组件库，提供这些丰富的组件能很好地满足大部分 PC 端业务开发需求。同时，若提供的组件无法满足需求，还能对它进行二次开发，节省了开发者的时间。

首先，我们访问一下 Element UI 的官网，逛一逛这个站点。

引入眼帘的是官网首页，如下图所示：

从网站上的导航栏可以看出，官网分为四个部分：指南、组件、主题和资源。

然后，我们点击 “指南”，可以发现这部分的内容分为 2 块：设计原则和导航。其中，包含四个设计原则（一致、反馈、效率、可控），而导航这部分的内容主要讲解是 Element UI 提供的导航功能。它将导航功能分为 “侧栏导航” 和 “顶部导航”，在项目设计工程中选择合适的导航类型能帮助用户降低产品的学习门槛。官方就提到了这两类导航之间的区别：

侧栏导航：提高导航可见性，方便页面之间切换。
顶部导航：顺应了从上至下的正常浏览顺序，方便浏览信息，但也限制了导航的数量和文本长度。

接着，我们在官网的顶部导航中点击 “组件”，这部分的内容就是我们平时开发过程中常用到的部分了。显而易见，”组件“ 板块提供了 6 大类型的组件，每个组件的下方还附有源码示例，也可以在 CodePen 中运行源码，如下图所示。

同时，在该板块还提供了使用指南等内容，方便开发者查阅。

接下来这个板块是 “主题” 。Element UI 的一大特色就是支持开发者自定义主题，你可以使用在线主题编辑器，可以修改定制 Element 所有全局和组件的 Design Tokens，并可以方便地实时预览样式改变后的视觉效果。

最后一部分是 ”资源“，主要提供给设计师使用。Element UI 目前为 Axure 和 Sketch 两种设计工具提供了插件，方便设计师在这些软件中进行设计时调用 Element UI 的组件，从而保证视觉风格的统一。

2. ElementUI与Vue

Element UI 是 UI 框架，而 Vue 是前端框架，UI 框架一般是伴随着前端框架产生的。虽然目前 Element UI 为 Angular 和 React 也提供了组件库，但国内大多数开发者还是用它与 Vue 配合使用进行开发。

通常情况下，我们可以利用 Vue CLI 创建一个前端项目，然后引入和配置 Element UI。例如，当你使用 Vue CLI 生成了一个初始化 Vue 项目，你可以通过下面命令安装 Element UI：

npm install element-ui -S

接着在 package.json 文件中就会插入一条记录：

"dependencies": {
    "element-ui": "^2.15.1"
}

这就表明 Element UI 已成功安装到你的 Vue 项目中了。通过 import 语法就可以在项目中引入 Element UI 进行使用。

看到上面的 npm 安装步骤，想必大家都已经跃跃欲试了，同学们不要着急，这里仅是让大家对于 Element UI 与 Vue 有一个初步的理解，接下来我带大家手把手搭建开发环境。

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/我家自动化/article/detail/903293