本节将介绍如何在项目中使用 Element Plus。
用法#
完整引入#
如果你对打包后的文件大小不是很在乎，那么使用完整导入会更方便。
// 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"] } }
按需导入#
您需要使用额外的插件来导入要使用的组件。
自动导入推荐#
首先你需要安装unplugin-vue-components 和 unplugin-auto-import这两款插件
npm install -D unplugin-vue-components unplugin-auto-import
然后把下列代码插入到你的 Vite 或 Webpack 的配置文件中
Vite#
// 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#
// 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()], }), ], }
想了解更多打包 (Rollup, Vue CLI) 和配置工具，请参考 unplugin-vue-components 和 unplugin-auto-import。
Nuxt#
对于 Nuxt 用户，只需要安装 @element-plus/nuxt 即可。
npm install -D @element-plus/nuxt
然后将下面的代码写入你的配置文件.
// nuxt.config.ts export default defineNuxtConfig({ modules: ['@element-plus/nuxt'], })
配置文档参考 docs.
手动导入#
Element Plus 提供了基于 ES Module 的开箱即用的 Tree Shaking 功能。
但你需要安装 unplugin-element-plus 来导入样式。 配置文档参考 docs.
App.vue
<template> <el-button>我是 ElButton</el-button> </template> <script> import { ElButton } from 'element-plus' export default { components: { ElButton }, } </script>
// vite.config.ts import { defineConfig } from 'vite' import ElementPlus from 'unplugin-element-plus/vite' export default defineConfig({ // ... plugins: [ElementPlus()], })
WARNING
如果使用 unplugin-element-plus 并且只使用组件 API，你需要手动导入样式。
Example:
import 'element-plus/es/components/message/style/css' import { ElMessage } from 'element-plus'
快捷搭建项目模板#
我们提供了 Vite 模板。
对于Nuxt 用户，我们有一个 Nuxt 模板。
对于 Laravel 用户，我们也准备了Laravel 模板。
全局配置#
在引入 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>
使用 Nuxt.js#
我们也可以使用 Nuxt.js：
开始使用#
现在你可以启动项目了。 对于每个组件的用法，请查阅对应的独立文档。
