Element Plus极快开始Vue 3.x

Tsingfeng.

2024-02-07 帮助3人

一、环境支持

需先安装好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>
<link rel="stylesheet" href="//unpkg.com/element-plus/dist/index.css" />
<script src="//unpkg.com/vue@3"></script>
<script src="//unpkg.com/element-plus"></script>
</head>

2、jsDelivr CDN提供商

<head>
<link
rel="stylesheet"
href="//cdn.jsdelivr.net/npm/element-plus/dist/index.css"
/>
<script src="//cdn.jsdelivr.net/npm/vue@3"></script>
<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、开始使用

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

这篇好文章是转载于：学新通技术网

Element Plus极快开始Vue 3.x

一、环境支持

二、安装

（一）使用包管理器安装

（二）浏览器直接引入

1、unpkg CDN提供商

2、jsDelivr CDN提供商

三、快速上手（通过包管理器安装，配合打包工具）

（一）完整引入

（二）Volar 插件

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

（四）快速搭建项目模板

1、全局配置

2、开始使用

photoshop蒙版画笔没反应怎么办

微信小程序没声音怎么办

微信提示登录环境异常是什么意思原因

excel图片置于文字下方的方法

微信运动停用后别人还能看到步数吗

使用云服务器搭建个人游戏加速器教程

微信人名旁边有个图标有什么用

Excel筛选和排序是灰色的怎么办

抖音国际版要用什么加速器能流畅刷Tiktok的加速器

键盘上的负数是哪个键