calf-ui

一个基于vue.js的金融级移动端ui组件库

相关链接

文档地址：http://123.206.17.49/docs/#/

demo地址：http://123.206.17.49/docs/example/

demo二维码：

用法

安装

yarn add calf-ui -S

配置webpack

如果是自己搭建的vue项目，直接配置webpack.config.js；如果是vue-cli生成的项目，配置vue.config.js

配置webpack的resolve和alias

// webpack.conf.js
resolve: {
  extensions: ['.js', '.vue', '.css'],
  alias: {
    'calf-ui': 'calf-ui/lib'
  }
}

配置vue.config.js

// vue.config.js
chainWebpack: (config) => {
  config.resolve.alias.set('calf-ui', 'calf-ui/lib')
  config.resolve.extensions.add('.css')
}

配置babel-plugin-import

可以使用babel-plugin-import让calf-ui组件库支持按需引入

1、安装babel-plugin-import

yarn add babel-plugin-import -S

2、配置calf-ui按需引入

// .babelrc
"plugins": [
  [
    "import",
    {
      "libraryName": "calf-ui",
      "libraryDirectory": "lib",
      "style": true
    }
  ]
]

全局引入

import Vue from 'vue'
import 'calf-ui/lib/style.css'
import Calf from 'calf-ui'
 
Vue.use(Calf)

按需引入

import Vue from 'vue'
 
import {
  Button,
  Captch,
  Popup,
  Dialog,
  Loading,
  ListPicker,
  CascadePicker,
  DatePicker,
  Notice,
  Picker,
  Progress,
  PullRefresh,
  Tab,
  Textarea,
  Toast,
  Switch
} from 'calf-ui'
 
 
Vue.use(Button)
Vue.use(Captch)
Vue.use(Popup)
Vue.use(ListPicker)
Vue.use(Progress)
Vue.use(Textarea)
Vue.use(Notice)
Vue.use(Switch)
Vue.use(PullRefresh)
Vue.use(Tab)
Vue.use(Loading)
Vue.use(Toast)
Vue.use(Picker)
Vue.use(CascadePicker)
Vue.use(DatePicker)
Vue.use(Dialog)

具体使用方法见文档