# bk-magic-vue

> 基于蓝鲸 Magicbox 和 Vue 的前端组件库

Latest version **2.5.9** (published 2025-01-07) · MIT license · 0 weekly downloads

## Install

```sh
npm install bk-magic-vue
pnpm add bk-magic-vue
yarn add bk-magic-vue
bun add bk-magic-vue
```

## Health

**Score 35/100 (D)** — status: stable.

Positive: no vulnerabilities.

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

Negative: stale.

## Facts

| | |
|---|---|
| Version | 2.5.9 |
| Published | 2025-01-07 |
| First published | 2019-05-15 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Node | <= 16.14 |
| Dependencies | 6 |
| Unpacked size | 17.4 MB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | bkfe |
| Maintainers | ielgnaw, blueking, sundytt |
| Keywords | bk-magic, bk-magic-vue, bk-magicbox, bk-magicbox-vue, magicbox, Vue, Vue.js, component, components, ui, framework |

## Links

- npm: https://www.npmjs.com/package/bk-magic-vue
- npm.io page: https://npm.io/package/bk-magic-vue

## Dependencies (6)

- [marked](https://npm.io/package/marked.md) 4.2.12
- [clipboard](https://npm.io/package/clipboard.md) ^2.0.11
- [spark-md5](https://npm.io/package/spark-md5.md) ^3.0.2
- [tinycolor2](https://npm.io/package/tinycolor2.md) ^1.4.1
- [highlight.js](https://npm.io/package/highlight.js.md) ^10.7.2
- [json-formatter-js](https://npm.io/package/json-formatter-js.md) ^2.3.4

## Alternatives

- [@progress/kendo-ooxml](https://npm.io/package/@progress/kendo-ooxml.md) — 152.1K weekly downloads
- [@progress/kendo-react-ripple](https://npm.io/package/@progress/kendo-react-ripple.md) — 8.0K weekly downloads
- [@progress/kendo-react-orgchart](https://npm.io/package/@progress/kendo-react-orgchart.md) — 4.3K weekly downloads
- [@praxisui/dynamic-fields](https://npm.io/package/@praxisui/dynamic-fields.md) — 2.4K weekly downloads
- [@progress/kendo-vue-listbox](https://npm.io/package/@progress/kendo-vue-listbox.md) — 932 weekly downloads

## Recent versions

- 2.5.9 (latest) — 2025-01-07
- 2.5.10-beta.19 (beta) — 2026-06-22
- 2.5.10-dev.3 (dev) — 2026-02-06
- 2.4.15-beta.24 (vue2.5-latest) — 2025-01-18
- 2.2.0-prev.2 (prev) — 2020-08-04
- 2.5.10-beta.18 — 2026-03-16
- 2.5.10-beta.17 — 2026-03-05
- 2.5.10-dev.2 — 2026-02-02
- 2.5.10-dev.1 — 2026-01-23
- 2.5.10-beta.16 — 2025-10-21
- 2.5.10-beta.15 — 2025-09-15
- 2.5.10-beta.14 — 2025-09-08
- 2.5.10-beta.13 — 2025-07-23
- 2.5.10-beta.12 — 2025-07-10
- 2.5.10-beta.11 — 2025-07-03
- … 398 more at https://npm.io/package/bk-magic-vue/versions

## README

![magicbox](img/logo.png)
---

[![license](https://img.shields.io/badge/license-MIT-brightgreen.svg?style=flat)](https://github.com/TencentBlueKing/bkui-vue2/blob/master/LICENSE.txt) [![Release Version](https://img.shields.io/npm/v/bk-magic-vue.svg)](https://github.com/Tencent/bk-PaaS/releases) [![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg)](https://github.com/TencentBlueKing/bkui-vue2/pulls)

[English](README_EN.md) | 简体中文

# bk-magic-vue

基于蓝鲸 Magicbox 和 Vue 的前端组件库

## 安装

```bash
$ npm install --save bk-magic-vue
```


## 使用

### 全量引入

```js
import bkMagicVue from 'bk-magic-vue'
import 'bk-magic-vue/dist/bk-magic-vue.min.css'
Vue.use(bkMagicVue)
```

### 按需引入

按需引入我们需要借助 [babel-plugin-import-bk-magic-vue](https://www.npmjs.com/package/babel-plugin-import-bk-magic-vue) 来实现。

首先，安装 `babel-plugin-import-bk-magic-vue`

```bash
npm i babel-plugin-import-bk-magic-vue -D
```

然后需要在项目的 `.babelrc` 文件中 `plugins` 增加配置

```js
// baseLibName 是 bk-magic-vue 组件库的 package name，默认值为 bk-magic-vue
{
    "presets": ...,
    "plugins": [
        ...
        ["import-bk-magic-vue", {
            "baseLibName": "bk-magic-vue"
        }]
    ]
}
```

之后就可以用如下语法形式来实现按需引用了

```js
import { bkButton } from 'bk-magic-vue'
import { bkButton as cc } from 'bk-magic-vue'
import { bkButton, bkDropdownMenu } from 'bk-magic-vue'
import { bkButton as cc, bkDropdownMenu as dd } from 'bk-magic-vue'
console.log(bkButton)
console.log(cc)
console.log(bkDropdownMenu)
console.log(dd)
```

## 开发
```bash
npm run dev
```

## 构建
```bash
npm run build
```

## BlueKing Community
- [BK-CMDB](https://github.com/Tencent/bk-cmdb)：蓝鲸配置平台（蓝鲸CMDB）是一个面向资产及应用的企业级配置管理平台。
- [BK-CI](https://github.com/Tencent/bk-ci)：蓝鲸持续集成平台是一个开源的持续集成和持续交付系统，可以轻松将你的研发流程呈现到你面前。
- [BK-BCS](https://github.com/Tencent/bk-bcs)：蓝鲸容器管理平台是以容器技术为基础，为微服务业务提供编排管理的基础服务平台。
- [BK-PaaS](https://github.com/Tencent/bk-PaaS)：蓝鲸PaaS平台是一个开放式的开发平台，让开发者可以方便快捷地创建、开发、部署和管理SaaS应用。
- [BK-SOPS](https://github.com/Tencent/bk-sops)：标准运维（SOPS）是通过可视化的图形界面进行任务流程编排和执行的系统，是蓝鲸体系中一款轻量级的调度编排类SaaS产品。
- [BK-JOB](https://github.com/Tencent/bk-job)：蓝鲸作业平台(Job)是一套运维脚本管理系统，具备海量任务并发处理能力。
- [BK-BASE](https://github.com/Tencent/bk-base)：蓝鲸基础计算平台(BK-BASE)是一个专注于运维领域的的基础平台，打造一站式、低门槛的基础服务。

## Contributing
对于项目感兴趣，想一起贡献并完善项目请参阅[Contributing Guide](docs/CONTRIBUTING.md)。

[腾讯开源激励计划](https://opensource.tencent.com/contribution) 鼓励开发者的参与和贡献，期待你的加入。

## License

基于 MIT 协议， 详细请参考[LICENSE](LICENSE.txt)

---
_Source: https://npm.io/package/bk-magic-vue · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._