Package Exports

o-ui-ldf

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (o-ui-ldf) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

npm

o-ui

- 基于vue[2.6.10]的移动端组件库
- 使用vw适配移动端[750为设计稿]

适配 postcss-px-to-viewport .postcssrc设置

"postcss-px-to-viewport": {
    viewportWidth: 750,      // 视窗的宽度，对应的是我们设计稿的宽度，一般是750
    viewportHeight: 1334,    // 视窗的高度，根据750设备的宽度来指定，一般指定1334，也可以不配置
    unitPrecision: 3,        // 指定`px`转换为视窗单位值的小数位数（很多时候无法整除）
    viewportUnit: 'vw',      // 指定需要转换成的视窗单位，建议使用vw
    selectorBlackList: ['ignore', 'ig'],  // 指定不转换为视窗单位的类，可以自定义，可以无限添加,建议定义一至两个通用的类名
    minPixelValue: 1,       // 小于或等于`1px`不转换为视窗单位，你也可以设置为你想要的值
    exclude: /(node_modules)/,
    mediaQuery: false       // 允许在媒体查询中转换`px`
}

全量加载[基于vuecli3.x]

npm install o-ui-ldf -S
import OUI from 'o-ui-ldf'
import 'o-ui-ldf/lib/index.css'
Vue.use(OUI)

按需引入-无须引入css

npm i babel-plugin-component -S
.babelrc
{
    "plugins": [
        ["component", {
            "libraryName": "o-ui-ldf",
            "root": "index.umd",
            "style": "./../index.css"
        }]
    ]
}
import {pager} from 'o-ui-ldf'
Vue.use(pager)

// OR

Vue.component(pager.name, pager)

// directive
import {directive_pager} from 'o-ui-ldf/lib/diretive.js'
Vue.directive('pager', directive_pager)

template

<o-pager>
    ...
</o-pager>

日志

0.2.2
- 新增 css[avatar, broder, btn, color, gap]
- 新增组件 pager
0.2.1
- 按需引入
- 目录变更
- 新增命令添加组件和示例页面
0.1.2-15
- 目录变更解决按需引入问题
0.1.1
- 基础搭建

Project setup

npm install

Compiles and hot-reloads for development

npm run serve

Compiles and minifies for production

npm run build

Run your tests

npm run test

Lints and fixes files

npm run lint

lib 库打包

npm run lib

打包组件

npm run build:component

gulp方式打包css

npm run build:css

github

See github.

o-ui-ldf