TencentBlueKing / bkui-vue2

根据蓝鲸前端规范、设计规范并结合我们业务开发过程中的积累沉淀,提供一套基础组件,供开发人员使用
Other
45 stars 46 forks source link

magicbox

license Release Version PRs Welcome

English | 简体中文

bk-magic-vue

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

安装

$ npm install --save bk-magic-vue

使用

全量引入

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 来实现。

首先,安装 babel-plugin-import-bk-magic-vue

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

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

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

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

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)

开发

npm run dev

构建

npm run build

BlueKing Community

Contributing

对于项目感兴趣,想一起贡献并完善项目请参阅Contributing Guide

腾讯开源激励计划 鼓励开发者的参与和贡献,期待你的加入。

License

基于 MIT 协议, 详细请参考LICENSE