Skip to content

快速开始

环境说明

  1. vue 版本:>3.4.0
  2. element-plus 版本:>2.6.0

安装

shell
# NPM
npm i element-plus --save
npm i @easyui/element-plus-pro --save

# PNPM
pnpm add element-plus
pnpm add @easyui/element-plus-pro

全量引入

js
import { createApp } from "vue";
import ElementPlus from "element-plus";
import ElementPlusPro from "@easyui/element-plus-pro";
import "element-plus/dist/index.css";
import "@easyui/element-plus-pro/theme/index.css";
import App from "./App.vue";

const app = createApp(App);

app.use(ElementPlus);
// 全量引入 ElementPlusPro 组件
app.use(ElementPlusPro);
app.mount("#app");

按需引入

js
import { createApp } from "vue";
import ElementPlus from "element-plus";
import {
  SSpace,
  SLayout,
  SLayoutMain,
  SLayoutSide,
  SFrame,
  SFramePane,
  SForm,
  SFormItem,
  SSearchForm,
  SModalForm,
  SList,
  SListItem,
  STable,
  SSortTable,
  SSortList,
  SDynamicTable,
  SDynamicList,
  SModal,
  SDrawer
} from "@easyui/element-plus-pro";
import "element-plus/dist/index.css";
import "@easyui/element-plus-pro/theme/index.css";
import App from "./App.vue";

const app = createApp(App);

app.use(ElementPlus);

// 按需引入 ElementPlusPro 组件
app.use(SSpace);
app.use(SLayout);
app.use(SLayoutMain);
app.use(SLayoutSide);
app.use(SFrame);
app.use(SFramePane);
app.use(SForm);
app.use(SFormItem);
app.use(SSearchForm);
app.use(SModalForm);
app.use(SList);
app.use(SListItem);
app.use(STable);
app.use(SSortTable);
app.use(SSortList);
app.use(SDynamicTable);
app.use(SDynamicList);
app.use(SModal);
app.use(SDrawer);

app.mount("#app");