2.11.1

快速开始 ​

本节将介绍如何在项目中使用 Element Plus。

使用 ​

完整引入 ​

如果你对打包后的文件大小不是很在乎，那么使用完整导入会更方便。

main.ts
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.types 指定全局组件类型。

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

按需导入 ​

您需要使用额外的插件来导入您所使用的组件。

自动导入 推荐 ​

首先你需要安装 unplugin-vue-components 和 unplugin-auto-import 这两款插件。

shell
$ npm install -D unplugin-vue-components unplugin-auto-import
shell
$ yarn add -D unplugin-vue-components unplugin-auto-import
shell
$ pnpm install -D unplugin-vue-components unplugin-auto-import

然后将下面的代码添加到你的 Vite 或 Webpack 的配置文件中。

Vite ​
vite.config.ts
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 ​
webpack.config.js
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()],
    }),
  ],
}

关于更多打包工具 (Rollup, Vue CLI) 和其他配置，请参考 unplugin-vue-components 和 unplugin-auto-import。

Nuxt ​

对于 Nuxt 用户，你只需要安装 @element-plus/nuxt。

shell
$ npm install -D @element-plus/nuxt
shell
$ yarn add -D @element-plus/nuxt
shell
$ pnpm install -D @element-plus/nuxt

然后将下面的代码添加到你的配置文件中。

nuxt.config.ts
ts
export default defineNuxtConfig({
  modules: ['@element-plus/nuxt'],
})

请参考文档了解如何配置。

手动导入 ​

Element Plus 提供了基于 ES Module 的开箱即用的 Tree Shaking 功能。

但是你需要安装 unplugin-element-plus 来进行样式导入。请参考文档了解如何配置。

App.vue
vue
<template>
  <el-button>I am ElButton</el-button>
</template>

<script>
import { ElButton } from 'element-plus'

export default {
  components: { ElButton },
}
</script>
vite.config.ts
ts
import { defineConfig } from 'vite'
import ElementPlus from 'unplugin-element-plus/vite'

export default defineConfig({
  // ...
  plugins: [ElementPlus()],
})

起始模板 ​

我们提供了一个 Vite 模板。

对于 Nuxt 用户，我们有一个 Nuxt 模板。

对于 Laravel 用户，我们有一个 Laravel 模板。

全局配置 ​

在注册 Element Plus 的时候，你可以传入一个全局配置对象。 size 用于设置表单组件的默认尺寸，zIndex 用于设置弹出组件的 z-index，zIndex 的默认值为 2000。

完整引入

main.ts
ts
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 })

按需导入

App.vue
vue
<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>

使用 Nuxt.js ​

我们也可以使用 Nuxt.js

让我们开始吧 ​

你现在可以开始开发你的项目了。每个组件的用法请参阅各个组件的文档。