快速开始

2023-06-06 06:19| 来源: 网络整理| 查看: 265

快速开始 #

本节将介绍如何在项目中使用 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

我是 ElButton import { ElButton } from 'element-plus' export default { components: { ElButton }, } // 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 })

按需引入:

import { defineComponent } from 'vue' import { ElConfigProvider } from 'element-plus' export default defineComponent({ components: { ElConfigProvider, }, setup() { return { zIndex: 3000, size: 'small', } }, }) 使用 Nuxt.js #

我们也可以使用 Nuxt.js：

开始使用 #

现在你可以启动项目了。具体每个组件的使用方法, 请查阅每个组件的独立文档.

【本文地址】

公司简介

联系我们