Element Plus快速开始（Vue 3.x）

Tsingfeng.

已于 2022-08-18 00:32:57 修改

阅读量1k

点赞数

分类专栏：前端技术文章标签： vue.js 前端 javascript typescript elementui

于 2022-08-18 00:29:29 首次发布

本文链接：https://blog.csdn.net/weixin_59668801/article/details/126396760

版权

前端技术专栏收录该内容

10 篇文章 0 订阅

订阅专栏

一、环境支持

需先安装好Vue 3.x
Element Plus 不再支持 IE 浏览器。
支持以下浏览器版本：

Edge ≥ 79

Firefox ≥ 78

Chrome ≥ 64

Safari ≥ 12

二、安装

（一）使用包管理器安装

# 选择一个你喜欢的包管理器

# NPM
$ npm install element-plus --save

# Yarn
$ yarn add element-plus

# pnpm
$ pnpm install element-plus

（二）浏览器直接引入

1、unpkg CDN提供商

<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>

2、jsDelivr CDN提供商

<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')

（二）Volar 插件

如果您使用 Volar，请在 tsconfig.json 中通过 compilerOptions.type 指定全局组件类型。

// tsconfig.json
{
  "compilerOptions": {
    // ...
    "types": ["element-plus/global"]
  }
}

（三）按需导入、自动导入、手动导入：略

（四）快速搭建项目模板

1、全局配置

在引入 Element Plus 时，可以传入一个包含 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>