# @yuechan/element-design

> A magical vue admin. An out-of-box UI solution for enterprise applications. Newest development stack of vue. Lots of awesome features

Latest version **1.0.17** (published 2025-03-20) · MIT license · 0 weekly downloads

## Install

```sh
npm install @yuechan/element-design
pnpm add @yuechan/element-design
yarn add @yuechan/element-design
bun add @yuechan/element-design
```

## Health

**Score 25/100 (F)** — status: maintenance-mode.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: stale; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.17 |
| Published | 2025-03-20 |
| First published | 2023-06-03 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Node | >=14.0.0 |
| Dependencies | 20 |
| Unpacked size | 1.6 MB |
| Known vulnerabilities | 0 (+34 in 6 direct dependencies) |
| Install scripts | no |
| GitHub stars | 1 |
| Author | cy19734682 |
| Maintainers | yuechan |
| Keywords | vue, admin, dashboard, element-ui, boilerplate, admin-template, management-system |

## Links

- npm: https://www.npmjs.com/package/@yuechan/element-design
- Repository: https://github.com/cy19734682/element-design
- Issues: https://github.com/cy19734682/element-design/issues
- npm.io page: https://npm.io/package/@yuechan/element-design

## Dependencies (20)

- [vue](https://npm.io/package/vue.md) ^2.6.14
- [vuex](https://npm.io/package/vuex.md) 3.1.0
- [xlsx](https://npm.io/package/xlsx.md) 0.14.1
- [axios](https://npm.io/package/axios.md) 0.18.1
- [jszip](https://npm.io/package/jszip.md) 3.2.1
- [lodash](https://npm.io/package/lodash.md) ^4.17.21
- [moment](https://npm.io/package/moment.md) ^2.29.4
- [core-js](https://npm.io/package/core-js.md) 3.6.5
- [echarts](https://npm.io/package/echarts.md) 4.2.1
- [vue-i18n](https://npm.io/package/vue-i18n.md) ^8.27.2
- [deepmerge](https://npm.io/package/deepmerge.md) ^4.3.1
- [js-cookie](https://npm.io/package/js-cookie.md) 2.2.0
- [element-ui](https://npm.io/package/element-ui.md) 2.15.10
- [file-saver](https://npm.io/package/file-saver.md) 2.0.1
- [vue-router](https://npm.io/package/vue-router.md) ^3.5.1
- [normalize.css](https://npm.io/package/normalize.css.md) 7.0.0
- [vue-baidu-map](https://npm.io/package/vue-baidu-map.md) ^0.21.22
- [@wangeditor/editor](https://npm.io/package/@wangeditor/editor.md) ^5.1.23
- [element-china-area-data](https://npm.io/package/element-china-area-data.md) ^5.0.2
- [@wangeditor/editor-for-vue](https://npm.io/package/@wangeditor/editor-for-vue.md) ^1.0.2

## Recent versions

- 1.0.17 (latest) — 2025-03-20
- 2.0.8 (vue3) — 2025-05-09
- 2.0.6 — 2025-03-20
- 2.0.5 — 2024-06-26
- 1.0.16 — 2024-06-26
- 2.0.4 — 2024-06-13
- 1.0.15 — 2024-06-13
- 2.0.3 — 2024-06-12
- 1.0.14 — 2024-06-12
- 2.0.2 — 2024-01-30
- 1.0.13 — 2024-01-30
- 1.0.12 — 2024-01-18
- 2.0.1 — 2024-01-18
- 2.0.0 — 2023-12-20
- 1.0.10 — 2023-12-20
- … 10 more at https://npm.io/package/@yuechan/element-design/versions

## README

# element-design
## 简介
基于 vue2 + element-ui 2.0 的代码进行封装，将频繁使用的组件抽离，使用简单的代码完成复杂的业务场景。

## vue3: [@yuechan/element-design@2.x.x](https://github.com/cy19734682/element-design-plus.git)
## vue2: [@yuechan/element-design@1.x.x](https://github.com/cy19734682/element-design.git)

### 安装
````
npm i @yuechan/element-design
````
### 使用
在mian.js中配置增加下列配置
````javascript
import ElmDesign from '@yuechan/element-design'
import '@yuechan/element-design/lib/elmDesign.min/css'

Vue.use(elmDesign,{
  router,
  store,
  i18n: (key, value) => i18n.t(key, value)
})
````
下面添加国际化相关配置，由于不同项目国际化配置位置不同，下面贴出常用配置
````javascript
import elementEnLocale from 'element-ui/lib/locale/lang/en' // element-ui lang
import elementZhLocale from 'element-ui/lib/locale/lang/zh-CN'// element-ui lang
import enLocale from './en'
import zhLocale from './zh'
import enEmLocale from '@yuechan/element-design/lang/en'
import zhEmLocale from '@yuechan/element-design/lang/zh'

const messages = {
  en: {
    ...enLocale, ...elementEnLocale, ...enEmLocale
  },
  zh: {
    ...zhLocale, ...elementZhLocale, ...zhEmLocale
  }
}

const i18n = new VueI18n({
  // set locale
  // options: en | zh | es
  locale: getLanguage(), // set locale messages
  messages,
  silentTranslationWarn: true
})
````
### 组件
- [x] [EmBaiduMap](./src/components/EmBaiduMap/README.md)（百度地图）<font color='#FF0000'>已集成到EmForm</font>
- [x] [EmCascader](./src/components/EmCascader/README.md) （自定义级联）<font color='#FF0000'>已集成到EmForm</font>
- [x] [EmCascaderArea](./src/components/EmCascaderArea/README.md) （省市区级联）<font color='#FF0000'>已集成到EmForm</font>
- [x] [EmCharts](./src/components/EmCharts/README.md) （图表）
- [x] [EmColorGroup](./src/components/EmColorGroup/README.md) （颜色组选择器组件）<font color='#FF0000'>已集成到EmForm</font>
- [x] [EmEditor](./src/components/EmEditor/README.md) （富文本框）<font color='#FF0000'>已集成到EmForm</font>
- [x] [EmForm](./src/components/EmForm/README.md) 表单
- [x] [EmFormGroup](./src/components/EmFormGroup/README.md) （表单组）
- [x] [EmFormModal](./src/components/EmFormModal/README.md) （弹窗表单）
- [x] [EmSearchForm](./src/components/EmSearchForm/README.md) （搜索表单）<font color='#FF0000'>已集成到EmForm</font>
- [x] [EmSelectInput](./src/components/EmSelectInput/README.md) （下拉选择输入框组件）<font color='#FF0000'>已集成到EmForm</font>
- [x] [EmStaticForm](./src/components/EmStaticForm/README.md) （静态响应式表单）
- [x] [EmIcons](./src/components/EmIcons/README.md) （Icon）
- [x] [EmIconSelect](./src/components/EmIconSelect/README.md) （Icon选择）
- [x] [EmTablePage](./src/components/EmTablePage/README.md)（分页表格）
- [x] [EmTableSelect](./src/components/EmTableSelect/README.md) （表格弹窗选择）<font color='#FF0000'>已集成到EmForm</font>
- [x] [EmUpload](./src/components/EmUpload/README.md) （文件上传）<font color='#FF0000'>已集成到EmForm</font>
- [x] [EmUploadExcel](./src/components/EmUploadExcel/README.md) （Excel上传解析数据）

---
_Source: https://npm.io/package/@yuechan/element-design · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._