do1-ui v0.2.2

do1-ui

An ui depend on vue

兼容性

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

• 对于 IE 系列浏览器，需要提供 babel-polyfill 的支持（组件不提供，请自行添加）。

快速上手

你可以引入整个 do1-ui，或是根据需要仅引入部分组件。我们先介绍如何引入完整的 do1-ui。

完整引入 do1-ui

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

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

Vue.use(Do1Ui)

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

按需引入(推荐)

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

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

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

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

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

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

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

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

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

使用姿势

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

// main.js
import Vue from 'vue'
import Do1Ui from 'do1-ui'
import 'do1-ui/theme-default/index.css'

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

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

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