ElementUI 的使用及自定义设置

最新推荐文章于 2025-04-16 13:59:22 发布

ghost_violets

最新推荐文章于 2025-04-16 13:59:22 发布

阅读量2.2k

点赞数

分类专栏： vue

本文链接：https://blog.youkuaiyun.com/ghost_violets/article/details/102868275

版权

vue 专栏收录该内容

19 篇文章

订阅专栏

什么是 ElementUI

官网介绍：Element，一套为开发者，设计师和产品经理准备的基于Vue 2.0的桌面端组件库

在开发的过程中，很多时候有很多的部分是可以被公共的时候，例如导航，底部的选项卡（手机web app）我们可以自己去开发，也可以使用第三方公司专门开发的这些组件库（UI组件库），ElementUI 就是其中的一种，还有几个比较好的：

1: MintUI （饿了么前端团队为M站项目开发的）
http://mint-ui.github.io/docs/#/zh-cn2/radio
2: Iview （个人爱好者开发的一个组件库）
https://www.iviewui.com/components/rate
3: vant （有赞公司开发的，有赞商城）
https://youzan.github.io/vant-weapp/#/area

如何使用 ElementUI

1：在 `vue-cli` 创建的项目里安装 element-ui (推荐使用npm的方式安装，它能更好地和webpack打包工具配合使用。)

npm install element-ui

2：在 main.js 文件中写入如下代码

import ElementUI from 'element-ui' //引入相关的组件（一般我门将第三方组件称为插件）
import 'element-ui/lib/theme-chalk/index.css' //组建的样式

Vue.use(ElementUI) //安装插件，然后我们就可以使用了

然后我们只需要把官网上我们需要的代码拿过来就好了

我们用一下，我在 about.vue 组件中加上从官网上拿来的代码（一个折叠面板）

<template>
  <div class="about">
  //从官网上复制过来的
    <el-collapse v-model="activeNames" @change="handleChange">
      <el-collapse-item title="一致性 Consistency" name="1">
        <div>与现实生活一致：与现实生活的流程、逻辑保持一致，遵循用户习惯的语言和概念；</div>
        <div>在界面中一致：所有的元素和结构需保持一致，比如：设计样式、图标和文本、元素的位置等。</div>
      </el-collapse-item>
      <el-collapse-item title="反馈 Feedback" name="2">
        <div>控制反馈：通过界面样式和交互动效让用户可以清晰的感知自己的操作；</div>
        <div>页面反馈：操作后，通过页面元素的变化清晰地展现当前状态。</div>
      </el-collapse-item>
      <el-collapse-item title="效率 Efficiency" name="3">
        <div>简化流程：设计简洁直观的操作流程；</div>
        <div>清晰明确：语言表达清晰且表意明确，让用户快速理解进而作出决策；</div>
        <div>帮助用户识别：界面简单直白，让用户快速识别而非回忆，减少用户记忆负担。</div>
      </el-collapse-item>
      <el-collapse-item title="可控 Controllability" name="4">
        <div>用户决策：根据场景可给予用户操作建议或安全提示，但不能代替用户进行决策；</div>
        <div>结果可控：用户可以自由的进行操作，包括撤销、回退和终止当前操作等。</div>
      </el-collapse-item>
    </el-collapse>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        activeNames: ['1']
      };
    },
    methods: {
      handleChange(val) {
        console.log(val);
      }
    }
  }
</script>

运行一下，我们就能看到效果（它和 bootstrap类似）
在这里插入图片描述

实现 ElementUI 组件的按需加载

什么是按需加载和全局加载

全局加载：默认情况，ElementUI 的组件的加载方式使用的是全局加载，就是我们在使用 Vue.use(ElementUI) （Vue.prototype.components= { }）安装这个组件的时候，默认情况下，是把ElementUI的所有的组件全部进行注册，然后可以在任何地方使用提供的组件
按需加载：需要什么就引入什么组件
很少有一个项目会使用到ElementUI的所有的组件，我们做的项目一般只需要使用一部分的ElementUI的组件，则我们更应该是做组件的按需加载

按需加载的实现方式

1：需要安装一个第三方的 loader（做代码的转换操作）

yarn add babel-plugin-component

2：修改babel.config.js 文件

module.exports = {
  presets: [
    '@vue/cli-plugin-babel/preset',
    ["es2015", { "modules": false }]
  ],
  "plugins": [
    [
      "component",
      {
        "libraryName": "element-ui",
        "styleLibraryName": "theme-chalk"
      }
    ]
  ]
}

3：根据需要注册自己需要的组件
如我要引入 Button 和 Select ，我们只主需要注册这两个组件即可

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

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

/* 或写为
 * Vue.use(Button)
 * Vue.use(Select)
 */

4：在需要的地方写代码

 <el-row>
      <el-button round>圆角按钮</el-button>
      <el-button type="primary" round>主要按钮</el-button>
      <el-button type="success" round>成功按钮</el-button>
      <el-button type="info" round>信息按钮</el-button>
      <el-button type="warning" round>警告按钮</el-button>
      <el-button type="danger" round>危险按钮</el-button>
    </el-row>

就能看到效果
在这里插入图片描述

ElementUI 主题色的设置

ElementUI 默认情况下，使用了一套颜色来显示相关的组件，例如使用 primary 就是蓝色， success 就是绿色，使用一种语义化的方式去描述相关的颜色，一般情况下来说，官方提供的颜色就可以满足绝大部分项目的需求，但是有的时候公司不太喜欢默认的颜色，希望自己去更改一下ElementUI的颜色。则ElementUI提供修改颜色的机会，一般我们把这些颜色也叫作主题

修改方式一：主题编辑器

提供web版本的界面，让用户去配置自己喜欢的主题色，然后进行下载一个 css 文件，然后在自己项目导入即可
在这里插入图片描述

在这里插入图片描述
将下载好的文件放到 src 下，然后引入就行

修改方式一：命令行工具

1：安装主题生成工具

npm i element-theme -g

2：下载主题

npm i element-theme-chalk

3：初始化变量文件 element-variables.scss

et -i

4：在文件（element-variables.scss）里修改变量
5：编译

et

6：导入 index.css 文件

ElementUI 的国际化

国际化指的就是做的项目可以在多个国家使用（根据每个国家对应的语言，显示与之对应的语言信息）一般把这种项目叫做 i18n 项目

i18n 是什么？

国际化（ internationalization 这个单词存在 18 个字符，取其首位则为 i18n ）

1：完整引入

import ElementUI from 'element-ui'
import locale from 'element-ui/lib/locale/lang/en'

Vue.use(ElementUI, { locale })

1：按需引入

import Vue from 'vue'
import { Button, Select } from 'element-ui'
import lang from 'element-ui/lib/locale/lang/en'
import locale from 'element-ui/lib/locale'

// 设置语言
locale.use(lang)

// 引入组件
Vue.component(Button.name, Button)
Vue.component(Select.name, Select)