Element Plus快速开始（Vue 3.x）_el-config-provider size

作者：小丑西瓜9 | 2024-02-20 07:29:00

踩

el-config-provider size

一、环境支持

需先安装好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>

2、开始使用

您可以从现在起启动您的项目。对于每个组件的用法，请参考单个组件对应的文档。

本文内容由网友自发贡献，转载请注明出处：https://www.wpsshop.cn/w/小丑西瓜9/article/detail/119089