Vue全家桶 - Element Plus 的学习和使用

Element Plus

一个基于 Vue 3，面向设计师和开发者的组件库。

安装

兼容性

在这里插入图片描述

使用包管理器

# npm
$ npm install element-plus --save

# Yarn
$ yarn add element-plus

# pnpm
$ pnpm install element-plus

浏览器直接引入

直接通过浏览器的 HTML 标签导入 Element Plus，然后就可以使用全局变量 ElementPlus 了。
根据不同的 CDN 提供商有不同的引入方式。
使用 CDN 引入 Element Plus 的用户在链接地址上锁定版本，以免将来 Element Plus 升级时受到非兼容性更新的影响。

// unpkg
<head>
  <!-- Import style -->
  <link rel="stylesheet" href="//unpkg.com/element-plus/dist/index.css" />
  <!-- Import Vue 3 -->
  <script src="//unpkg.com/vue@3"></script>
  <!-- Import component library -->
  <script src="//unpkg.com/element-plus"></script>
</head>
// jsDelivr
<head>
  <!-- Import style -->
  <link
    rel="stylesheet"
    href="//cdn.jsdelivr.net/npm/element-plus/dist/index.css"
  />
  <!-- Import Vue 3 -->
  <script src="//cdn.jsdelivr.net/npm/vue@3"></script>
  <!-- Import component library -->
  <script src="//cdn.jsdelivr.net/npm/element-plus"></script>
</head>

使用

全局完整引入

// main.ts
import { createApp } from 'vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import App from './App.vue'

const app = createApp(App)

app.use(ElementPlus)
app.mount('#app')

// 全局引入后可以直接在页面上使用
<template>
  <div class="mb-4">
    <el-button>Default</el-button>
    <el-button type="primary">Primary</el-button>
  </div>
</template>

按需导入

首先需要安装 unplugin-vue-components 和 unplugin-auto-import 这两款插件。
然后修改 Vite 或 Webpack 的配置文件。
安装两个插件并修改完配置文件后，启动项目有可能会报错提示 AutoImport | Components 不是一个函数。
报错原因
版本问题。
解决方案
安装指定版本 [email protected] | [email protected]

在这里插入图片描述

// vite.config.ts
import { defineConfig } from 'vite'
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
export default defineConfig({
  plugins: [
    AutoImport({
      resolvers: [ElementPlusResolver()],
    }),
    Components({
      resolvers: [ElementPlusResolver()]
    })
  ]
})

// webpack.config.js
const AutoImport = require('unplugin-auto-import/webpack')
const Components = require('unplugin-vue-components/webpack')
const { ElementPlusResolver } = require('unplugin-vue-components/resolvers')
module.exports = {
  plugins: [
    AutoImport({
      resolvers: [ElementPlusResolver()],
    }),
    Components({
      resolvers: [ElementPlusResolver()]
    })
  ]
}

手动导入

// vite.config.ts
import { defineConfig } from 'vite'
import ElementPlus from 'unplugin-element-plus/vite'
export default defineConfig({
  plugins: [ElementPlus()]
})

// 组件中引入使用
<template>
  <el-button>ElButton</el-button>
</template>
<script>
  import { ElButton } from 'element-plus'
  export default {
    components: { ElButton }
  }
</script>

全局配置

在引入 ElementPlus 时，可以传入一个包含 size 和 zIndex 属性的全局配置对象。 size 用于设置表单组件的默认尺寸，zIndex 用于设置弹出组件的层级，zIndex 的默认值为 2000。

// 完整引入
import { createApp } from 'vue'
import ElementPlus from 'element-plus'
import App from './App.vue'
const app = createApp(App)
app.use(ElementPlus, { size: 'small', zIndex: 3000 })

// 按需引入
<template>
  <el-config-provider :size="size" :z-index="zIndex">
    <app />
  </el-config-provider>
</template>
<script>
import { defineComponent } from 'vue'
import { ElConfigProvider } from 'element-plus'
export default defineComponent({
  components: { ElConfigProvider },
  setup() { return { zIndex: 3000, size: 'small' } }
})
</script>

Icon图标

如果要使用 Icon 图标，需要安装依赖 @element-plus/icons-vue。
使用 CDN 引入 Element Plus 在链接地址上锁定版本，以免将来 Element Plus 升级时受到非兼容性更新的影响。

# npm
$ npm install @element-plus/icons-vue
# Yarn
$ yarn add @element-plus/icons-vue
# pnpm
$ pnpm install @element-plus/icons-vue

注册所有图标

// main.ts
import * as ElementPlusIconsVue from '@element-plus/icons-vue'
const app = createApp(App)
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
  app.component(key, component)
}

浏览器直接引入

// unpkg
<script src="//unpkg.com/@element-plus/icons-vue"></script>
// jsDelivr
<script src="//cdn.jsdelivr.net/npm/@element-plus/icons-vue"></script>

使用图标

// 方式1 -- 使用 el-icon 为 SVG 图标提供属性
<el-icon :size="size" :color="color">
  <Edit />
</el-icon>
// 方式2 -- 独立使用，不从父级获取属性
<Edit />

总结

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

Vue全家桶 - Element Plus 的学习和使用

Element Plus

安装

兼容性

使用包管理器

浏览器直接引入

使用

全局完整引入

按需导入

手动导入

全局配置

Icon图标

注册所有图标

浏览器直接引入

使用图标

总结

悦读