pippi-ui v1.1.2

Pippi-ui组件库

具体使用查阅 Pippi-UI 组件库文档：https://guchengyi.gitee.io/pippi-ui/

推荐使用 npm 的方式安装，它能更好的和 webpack 打包工具配合使用，而且可以更好的和 es6 配合使用，并且支持按需引入。

npm 安装

npm install pippi-ui --save-dev

CDN 安装

待更新

引用 Pippi-ui

即可以引入整个 Pippi-ui，也可以根据需要仅引入部分组件，推荐开发时使用前者，最终上线时改为后者。我们先介绍如何引入完整的 Pippi-ui。

全部引用

在 main.js 中写入以下内容：

import Vue from 'vue'
import App from './App.vue'
import PipiUI from 'Pippi-ui' // 引入全部组件
import 'Pippi-ui/dist/css/index.css' // 引入全部组件样式

Vue.use(PipiUI)

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

以上代码便完成了 Pippi-ui 的引入，需要注意的是，样式文件需要单独引入。

按需引用

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

import Vue from 'vue'
import App from './App.vue'
import 'Pippi-ui/dist/css/pipi-card.css' // 引入p-card卡片组件样式
import { Card } from 'Pippi-ui' // 引入p-card卡片组件
Vue.use(Card)
s
new Vue({
    el: '#app',
    render: h => h(App)
})

特别提醒：按需引用仍然需要导入样式，即在 main.js 或根组件 import 'Pippi-ui/dist/css/pipi-card.css'

完整组件列表

import {
    Card,
    Button,
    Dialog,
    Input,
    Divider,
    Switch,
    Radio
} from 'Pippi-ui'

开始使用

至此，一个基于 Vue 和 Pippi-ui 的开发环境已经搭建完毕。各个组件的使用方法请查阅它们各自的说明文档。