FddUI

法大大企业组件库

安装

yarn add fdd-ui --registry=http://npm.fabigbig.com

使用

全局使用

import FddUi from 'fdd-ui'
import "fdd-ui/lib/styles/fdd-ui.css"

Vue.use(FddUi)

Example

<fdd-button>click</fdd-button>

按需加载

首先，安装饿了么团队的 babel-plugin-component

yarn add babel-plugin-component -D

配置 .babelrc

{
    "plugins": [
        ["component", {
            "libraryName": "fdd-ui",
            "libDir": "lib",
            "styleLibrary": {
                "name": "styles",
                "base": true, // with base.css file
                "path": "[module].css"
            }
        }]
    ]
}

babel插件自动帮我们自动引入对应的样式

import Vue from 'vue'
import { Button } from 'fdd-ui'

Vue.use(Button) // 按需引入的时候, 需要自己手动注册

主题定制

入口文件同级目录下创建一个 global.scss 文件

其实就是覆盖了var.scss里的变量的值

$--color-primary: red;
@import "~fdd-ui/src/styles/index.scss";

然后在入口文件中引入global.scss

import Vue from vue
import FddUI from 'fdd-ui'
// 原来引入 import "fdd-ui/lib/styles/fdd-ui.css"
import './global.scss'
// 其他代码 ...

Vue.use(FddUI)