prove-ui

An ui depend on vue

兼容性

• 支持所有的现代浏览器和 IE9+。

• 对于 IE 系列浏览器，需要提供 babel-polyfill 的支持。

快速上手

你可以引入整个 prove-ui，或是根据需要仅引入部分组件。

完整引入 prove-ui

# vue项目中添加依赖
yarn add prove-ui

// 在入口文件中使用
import Vue from 'vue'
import ProUi from 'prove-ui'
import 'prove-ui/lib/theme-default/index.css'

Vue.use(ProUi)

那么接下来即可在 Vue 挂载的节点下使用该 ui 组件了

按需引入(推荐)

目前按需引入不能和其他 ui 框架共存

# vue项目中添加依赖
yarn add prove-ui

# 添加 babel-plugin-component
yarn add babel-plugin-component -D

安装完 prove-ui 和 babel-plugin-component 后，在.babelrc中添加配置：

{
  plugins: [
    [
      'component',
      {
        libraryName: 'prove-ui',
        styleLibraryName: 'theme-default'
      }
    ]
  ]
}

接下来，如果你只希望引入部分组件，比如 Button 和 Select，那么需要在 main.js 中写入以下内容：

import Vue from 'vue'
import { Button, Select } from 'prove-ui'
import App from './App.vue'

Vue.use(Button)
Vue.use(Select)

new Vue({
  el: '#app',
  render: h => h(App)
})

使用姿势

引入 ui 组件后并通过vue注册组件后，在vue挂载的节点下即可使用组件。 组件以pr-为前缀的命名方式。

// main.js
import Vue from 'vue'
import ProUi from 'prove-ui'
import 'prove-ui/lib/theme-default/index.css'

import App fromm './App.vue'
// 全局注册
Vue.use(ProUi)

new Vue({
  el: '#app',
  render: h => h(App)
})

// App.vue
<template>
  <div id="app">
    <pr-button type="primary">按钮</pr-button>
    <pr-input v-model="value" placeholder="请输入..." />
  </div>
</template>