{"_id":"@cw-devops-fe/bk-magic-vue","name":"@cw-devops-fe/bk-magic-vue","dist-tags":{"latest":"4.1.12"},"versions":{"4.1.12":{"name":"@cw-devops-fe/bk-magic-vue","version":"4.1.12","description":"基于蓝鲸 Magicbox 和 Vue 的前端组件库","main":"dist/bk-magic-vue.min.js","publishConfig":{"access":"public","registry":"https://registry.npmjs.org/"},"scripts":{"updateCurl":"curl -X POST https://devops.cwoa.net/ms/process/api/external/pipelines/fb41dd156f3d49a697aeb4aa0d53e266/build -H \"Content-Type: application/json\" -H \"X-DEVOPS-UID: \" -d \"{\\\"branch\\\":\\\"dev@ui3.0\\\"}\"","dll":"node build/build-dll.js","dev":"node build/check-dll.js && cross-env NODE_ENV=dev node build/dev-server.js","clean":"rimraf dist && rimraf lib && npm run clean:css","clean:css":"rimraf lib/ui","build":"npm run clean && npm run build:css && npm run build:component && npm run build:library && npm run build:version","build:css":"gulp --gulpfile build/gulpfile.css.js build-css","build:component":"gulp --gulpfile gulpfile.component.js build-component --max-old-space-size=4096","build:library":"cross-env NODE_ENV=prod:all gulp --gulpfile gulpfile.library.js build-library","build:source":"cross-env NODE_ENV=prod:source gulp --gulpfile gulpfile.library.js build-library","build:min":"cross-env NODE_ENV=prod:min gulp --gulpfile gulpfile.library.js build-library","build:example:analyzer":"cross-env NODE_ENV=example node build/build-example.js dev analyzer","build:example":"cross-env NODE_ENV=example node build/build-example.js dev && npm run build:version","build:version":"node build/build-version.js","extract-chinese":"node tool/extract-chinese.js","prepublishOnly":"npm run build","prerelease":"npm version prerelease && npm publish","alpha":"npm version prerelease --preid=alpha && npm publish","beta":"npm version prerelease --preid=beta && npm publish --tag beta","extract":"node tool/extract-props.js","test":"jest --config __test__/jest.config.js --no-cache","publishAndUpdate":"npm publish --registry=http://registry.devops.canway.com/ && npm run updateCurl","publishCWOA":"npm publish --registry=https://bkrepo.cwoa.net/npm/devops/devops-npm-local/"},"keywords":["bk-magic","bk-magic-vue","bk-magicbox","bk-magicbox-vue","magicbox","Vue","Vue.js","component","components","ui","framework"],"author":{"name":"DevOps"},"license":"MIT","devDependencies":{"@babel/cli":"~7.4.4","@babel/core":"~7.4.5","@babel/helper-module-imports":"~7.0.0","@babel/plugin-external-helpers":"~7.2.0","@babel/plugin-proposal-object-rest-spread":"~7.4.4","@babel/plugin-syntax-dynamic-import":"~7.2.0","@babel/plugin-syntax-jsx":"~7.2.0","@babel/plugin-transform-async-to-generator":"~7.4.4","@babel/plugin-transform-modules-commonjs":"~7.4.4","@babel/plugin-transform-object-assign":"~7.2.0","@babel/plugin-transform-runtime":"~7.4.4","@babel/preset-env":"~7.4.5","@babel/register":"~7.4.4","@babel/runtime":"~7.4.5","@babel/runtime-corejs2":"~7.4.5","@commitlint/cli":"^11.0.0","@commitlint/config-conventional":"^11.0.0","@vue/babel-helper-vue-jsx-merge-props":"~1.0.0","@vue/babel-plugin-transform-vue-jsx":"~1.0.0","@vue/babel-preset-jsx":"~1.0.0","@vue/component-compiler-utils":"~3.0.0","@vue/test-utils":"~1.0.0-beta.29","array-flat-polyfill":"~1.0.1","babel-core":"~7.0.0-bridge.0","babel-eslint":"~10.0.2","babel-jest":"~24.9.0","babel-loader":"~8.0.6","babel-plugin-date-fns":"~0.2.1","body-parser":"~1.19.0","cheerio":"1.0.0-rc.12","compression-webpack-plugin":"~3.0.0","connect-history-api-fallback":"~1.6.0","copy-webpack-plugin":"~5.0.3","core-js":"~2.6.9","cpx":"~1.5.0","cross-env":"~5.2.0","css-loader":"~3.0.0","cssnano":"~4.1.10","date-fns":"~1.30.1","diff":"~4.0.1","diff2html":"~2.9.0","eslint":"~7.20.0","eslint-config-standard":"~12.0.0","eslint-friendly-formatter":"~4.0.1","eslint-loader":"~4.0.2","eslint-plugin-import":"~2.22.1","eslint-plugin-node":"~10.0.0","eslint-plugin-promise":"~4.2.1","eslint-plugin-standard":"~4.0.1","eslint-plugin-vue":"~7.6.0","eventsource-polyfill":"~0.9.6","express":"~4.17.1","file-loader":"~4.0.0","friendly-errors-webpack-plugin":"~1.7.0","fs-extra":"~8.0.1","gulp":"~4.0.2","gulp-base64":"~0.1.3","gulp-gzip":"~1.4.2","gulp-postcss":"~8.0.0","gulp-rename":"~1.4.0","gulp-replace":"~1.0.0","gulp-rollup":"~2.16.2","gulp-sourcemaps":"~2.6.5","html-webpack-plugin":"~3.2.0","http-proxy-middleware":"~0.19.1","husky":"^4.3.0","jest":"~24.9.0","jest-canvas-mock":"^2.1.2","jest-serializer-vue":"~2.0.2","jest-transform-stub":"~2.0.0","js-calendar":"~1.2.3","markdown-it":"~12.3.2","markdown-it-anchor":"~5.2.4","markdown-it-attrs":"~2.4.1","markdown-it-container":"~2.0.0","markdown-it-replace-link":"~1.0.1","markdown-it-table-of-contents":"~0.4.4","mini-css-extract-plugin":"~0.7.0","normalize-wheel":"~1.0.1","npm":"~6.14.6","optimize-css-assets-webpack-plugin":"~5.0.1","ora":"~3.4.0","parse5":"~5.1.0","popper.js":"~1.15.0","postcss":"~7.0.39","postcss-atroot":"~0.1.3","postcss-color-function":"~4.1.0","postcss-conditionals":"^2.1.0","postcss-discard-comments":"~4.0.2","postcss-extend-rule":"~2.0.0","postcss-for":"~2.1.1","postcss-import":"~12.0.1","postcss-loader":"~3.0.0","postcss-mixins":"~6.2.1","postcss-nested":"~4.1.2","postcss-preset-env":"~6.6.0","postcss-property-lookup":"~2.0.0","postcss-simple-extend":"^1.0.0","postcss-simple-vars":"~5.0.2","postcss-url":"~8.0.0","rimraf":"~2.6.3","rollup":"~1.16.2","rollup-plugin-alias":"~1.5.2","rollup-plugin-babel":"~4.3.3","rollup-plugin-cleanup":"~3.1.1","rollup-plugin-commonjs":"~10.0.1","rollup-plugin-copy":"~3.0.0","rollup-plugin-gzip":"~2.2.0","rollup-plugin-node-resolve":"~5.1.0","rollup-plugin-postcss":"~2.0.3","rollup-plugin-replace":"^2.2.0","rollup-plugin-terser":"~5.0.0","rollup-plugin-vue":"~5.0.1","rollup-pluginutils":"~2.8.1","style-loader":"~0.23.1","throttle-debounce":"~2.1.0","transliteration":"~2.1.3","url-loader":"~2.0.0","vue":"2.7.16","vue-i18n":"~8.11.2","vue-jest":"~3.0.4","vue-loader":"~15.7.0","vue-markdown-loader":"~2.4.1","vue-router":"~3.0.6","vue-style-loader":"~4.1.2","vue-template-compiler":"2.7.16","webpack":"~4.35.0","webpack-bundle-analyzer":"~3.3.2","webpack-dev-middleware":"~3.7.0","webpack-hot-middleware":"~2.25.0","webpack-merge":"~4.2.1","webpack-parallel-uglify-plugin":"~1.1.0","webpack-stream":"~5.2.1"},"peerDependencies":{"vue":"^2.7.15"},"dependencies":{"clipboard":"^2.0.11","highlight.js":"^10.7.2","json-formatter-js":"^2.3.4","marked":"4.2.12","resize-observer-polyfill":"^1.5.0","spark-md5":"^3.0.2","tinycolor2":"^1.4.1"},"husky":{"hooks":{"commit-msg":"commitlint -E HUSKY_GIT_PARAMS"}},"vetur":{"tags":"./bkui-vue2-helper/tags.json","attributes":"./bkui-vue2-helper/attributes.json"},"gitHead":"5a58102572bbf4c5b51074c1be6ae42e4787a5d4","_id":"@cw-devops-fe/bk-magic-vue@4.1.12","_nodeVersion":"20.18.3","_npmVersion":"11.6.2","dist":{"integrity":"sha512-Y7miy91V5ZbkRgEl/N2RrGpcW3qXOGXNsNBvvnBhtDiJASP1DyYOQwadPavQ6wxMh7211qC+cwS6XhbPss1lRQ==","shasum":"d6dac53d54a9873ee40ec59356d8f8a58eb64ae0","tarball":"https://registry.npmjs.org/@cw-devops-fe/bk-magic-vue/-/bk-magic-vue-4.1.12.tgz","fileCount":435,"unpackedSize":21578363,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIBAGPYFZX4Afasj/Y2WZyomlF83Mvq0TwfpCxiTWiJ6OAiEA9105abEMPa4RfX418t9EfsVnwOoZu+XAnKhOuu1bBdg="}]},"_npmUser":{"name":"xucode","email":"980669199@qq.com"},"directories":{},"maintainers":[{"name":"xucode","email":"980669199@qq.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/bk-magic-vue_4.1.12_1788243766102_0.9980744018177687"},"_hasShrinkwrap":false}},"time":{"created":"2026-09-01T06:22:45.931Z","4.1.12":"2026-09-01T06:22:46.391Z","modified":"2026-09-01T06:22:46.642Z"},"maintainers":[{"name":"xucode","email":"980669199@qq.com"}],"description":"基于蓝鲸 Magicbox 和 Vue 的前端组件库","keywords":["bk-magic","bk-magic-vue","bk-magicbox","bk-magicbox-vue","magicbox","Vue","Vue.js","component","components","ui","framework"],"author":{"name":"DevOps"},"license":"MIT","readme":"![magicbox](img/logo.png)\r\n---\r\n\r\n[![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)\r\n\r\n[English](README_EN.md) | 简体中文\r\n\r\n# @devops/bk-magic-vue\r\n\r\n基于蓝鲸 Magicbox 和 Vue 的前端组件库\r\n\r\n## 安装\r\n\r\n```bash\r\n$ npm install --save @devops/bk-magic-vue\r\n```\r\n\r\n\r\n## 使用\r\n\r\n### 全量引入\r\n\r\n```js\r\nimport bkMagicVue from '@devops/bk-magic-vue'\r\nimport '@devops/bk-magic-vue/dist/bk-magic-vue.min.css'\r\nVue.use(bkMagicVue)\r\n```\r\n\r\n### 按需引入\r\n\r\n按需引入我们需要借助 [babel-plugin-import-bk-magic-vue](https://www.npmjs.com/package/babel-plugin-import-bk-magic-vue) 来实现。\r\n\r\n首先，安装 `babel-plugin-import-bk-magic-vue`\r\n\r\n```bash\r\nnpm i babel-plugin-import-bk-magic-vue -D\r\n```\r\n\r\n然后需要在项目的 `.babelrc` 文件中 `plugins` 增加配置\r\n\r\n```js\r\n// baseLibName 是 bk-magic-vue 组件库的 package name，默认值为 @devops/bk-magic-vue\r\n{\r\n    \"presets\": ...,\r\n    \"plugins\": [\r\n        ...\r\n        [\"import-bk-magic-vue\", {\r\n            \"baseLibName\": \"@devops/bk-magic-vue\"\r\n        }]\r\n    ]\r\n}\r\n```\r\n\r\n之后就可以用如下语法形式来实现按需引用了\r\n\r\n```js\r\nimport { bkButton } from '@devops/bk-magic-vue'\r\nimport { bkButton as cc } from '@devops/bk-magic-vue'\r\nimport { bkButton, bkDropdownMenu } from '@devops/bk-magic-vue'\r\nimport { bkButton as cc, bkDropdownMenu as dd } from '@devops/bk-magic-vue'\r\nconsole.log(bkButton)\r\nconsole.log(cc)\r\nconsole.log(bkDropdownMenu)\r\nconsole.log(dd)\r\n```\r\n\r\n## 开发\r\n```bash\r\nnpm run dev\r\n```\r\n\r\n## 构建\r\n```bash\r\nnpm run build\r\n```\r\n\r\n## BlueKing Community\r\n- [BK-CMDB](https://github.com/Tencent/bk-cmdb)：蓝鲸配置平台（蓝鲸CMDB）是一个面向资产及应用的企业级配置管理平台。\r\n- [BK-CI](https://github.com/Tencent/bk-ci)：蓝鲸持续集成平台是一个开源的持续集成和持续交付系统，可以轻松将你的研发流程呈现到你面前。\r\n- [BK-BCS](https://github.com/Tencent/bk-bcs)：蓝鲸容器管理平台是以容器技术为基础，为微服务业务提供编排管理的基础服务平台。\r\n- [BK-PaaS](https://github.com/Tencent/bk-PaaS)：蓝鲸PaaS平台是一个开放式的开发平台，让开发者可以方便快捷地创建、开发、部署和管理SaaS应用。\r\n- [BK-SOPS](https://github.com/Tencent/bk-sops)：标准运维（SOPS）是通过可视化的图形界面进行任务流程编排和执行的系统，是蓝鲸体系中一款轻量级的调度编排类SaaS产品。\r\n- [BK-JOB](https://github.com/Tencent/bk-job)：蓝鲸作业平台(Job)是一套运维脚本管理系统，具备海量任务并发处理能力。\r\n- [BK-BASE](https://github.com/Tencent/bk-base)：蓝鲸基础计算平台(BK-BASE)是一个专注于运维领域的的基础平台，打造一站式、低门槛的基础服务。\r\n\r\n## Contributing\r\n对于项目感兴趣，想一起贡献并完善项目请参阅[Contributing Guide](docs/CONTRIBUTING.md)。\r\n\r\n[腾讯开源激励计划](https://opensource.tencent.com/contribution) 鼓励开发者的参与和贡献，期待你的加入。\r\n\r\n## License\r\n\r\n基于 MIT 协议， 详细请参考[LICENSE](LICENSE.txt)\r\n","readmeFilename":"README.md","_rev":"1-221ec9611d4d3f22ea4ee613e055006a"}