主文件
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")ElementPlus的 JS 代码默认支持基于 ES modules 的 摇树 tree shaking。
应用程序视图
<template>
<el-button> 我是 ElButton </el-button>
</template>
<script>
import { defineComponent } from "vue"
import { ElButton } from "element-plus"
export default defineComponent({
name: "app"
components: {
ElButton,
},
})
</script>我们强烈建议直接引入全部的样式文件，虽然这看起来会增大整个应用的体积，但这样做可以避免引入额外的打包工具插件（减少负担），你还可以通过 CDN 的方式来加载样式文件，从而使得你的应用加载更快。
通过 JS 的方式引入
import "element-plus/dist/index.css"通过 HTML 的头文件引入
<!-- index.html -->
<head>
<link rel="stylesheet" href="//unpkg.com/element-plus/dist/index.css" rel="external nofollow" target="_blank" />
</head>如果你想让样式也按需引入，你可以使用对应工具提供的插件来引用。请看常见问题
我们为新版的 vue-cli 准备了相应的 Element Plus 插件你可以用它们快速地搭建一个基于 Element Plus 的项目。
我们提供了通用的项目模板，你可以直接使用，另外我们还提供了 Vite 模板。对于 Laravel 用户，我们也准备了相应的模板，同样可以直接下载使用。
在引入 Element Plus 时，可以传入一个全局配置对象。该对象目前支持 size 与 zIndex 字段。size 用于改变组件的默认尺寸，zIndex 设置弹框的初始 z-index（默认值：2000）。按需引入 Element Plus 的方式，具体操作如下：
完整引入 ElementPlus：
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 })按需引入 ElementPlus：
import { createApp } from "vue"
import { ElButton } from "element-plus"
import App from "./App.vue"
const app = createApp(App)
app.config.globalProperties.$ELEMENT = option
app.use(ElButton)按照以上设置，项目中所有拥有 size 属性的组件的默认尺寸均为 "small"，弹框的初始 z-index 为 3000。
我们还可以使用 Nuxt.js
至此，一个基于 Vue 和 Element Plus 的开发环境已经搭建完毕，现在就可以编写代码了。各个组件的使用方法请参阅它们各自的文档。
如果你使用 vite 作为构建打包工具，那么你需要先安装 vite-plugin-element-plus 来实现按需加载样式
yarn add vite-plugin-element-plus -D
# 或
npm install vite-plugin-element-plus -D然后将如下代码添加至 vite.config.js 文件中:
import { defineConfig } from "vite"
import vue from "@vitejs/plugin-vue"
import VitePluginElementPlus from "vite-plugin-element-plus"
// https://vitejs.dev/config/
export default defineConfig(({ mode }) => {
plugins: [
vue(),
VitePluginElementPlus({
// 如果你需要使用 [component name].scss 源文件，你需要把下面的注释取消掉。
// 对于所有的 API 你可以参考 https://github.com/element-plus/vite-plugin-element-plus
// 的文档注释
// useSource: true
format: mode === "development" ? "esm" : "cjs",
}),
],
})
TS如果你使用 webpack 作为构建打包工具，那么你需要先安装 babel-plugin-import 来实现按需加载样式
yarn add babel-plugin-import -D
# 或
npm install babel-plugin-import -D然后你需要将以下代码加入你的 babel.config.js 文件中。
babel.config.js
module.exports = {
plugins: [
[
"import",
{
libraryName: "element-plus",
// 引入组件
customName: (name) => {
name = name.slice(3)
return `element-plus/lib/components/${name}`
},
// 引入样式
customStyleName: (name) => {
name = name.slice(3)
// 如果你需要引入 [name].scss 文件，你需要用下面这行
// return `element-plus/lib/components/${name}/style`
// 引入 [name].css
return `element-plus/lib/components/${name}/style/css`
},
},
],
],
}
Color 色彩Element Plus 为了避免视觉传达差异，使用一套特定的调色板来规定颜色，为你所搭建的产品提供一致的外观视觉感受。主...
Select V2 虚拟列表选择器这个组件目前在测试当中，如果在使用中发现任何漏洞和问题，请在Github中提交 issue 以便我们进行...
series[i]-radar.lineStyle设置 ECharts 雷达图的线条样式。series[i]-radar.lineStyle.normal通过 normal 状态设置雷达图的线条...
什么是 ECharts 自定义系列？自定义系列（custom series）是一种系列的类型，它能够让用户定制渲染逻辑，在已有的坐标系中创造新...
我们已经了解过如何对 ECharts 图表的多个平行坐标轴刻度进行设置（使用 parallelAxisDefault）。而在本节内容中，您需要知道怎...