jyh5vlib v1.1.2

特性

• 60+ 高质量组件
• 95% 单元测试覆盖率
• 完善的中英文文档和示例
• 支持按需引入 babel-plugin-import
• 支持主题定制
• 支持国际化
• 支持 TS
• 支持 SSR

安装

# Using npm
npm i jyh5vlib -S

# Using yarn
yarn add jyh5vlib

浏览器支持

Modern browsers and Android 4.0+, iOS 7+.

⌨️ 本地开发

 git clone git@172.16.101.32:10022/ITS-TOOLS/jyh5vlib.git
 cd jyh5vlib
 git checkout PE20191231-BETA-407
 yarn or npm install
 npm start

如何发包

 npm config set registry http://registry.npm.jieyuechina.com --global # 将npm切到公司的镜像
 npm config get registry # 检查是否切换成功
 vim package.json # 修改版本号 
 npm run build:lib #打出需要发布的包 检查dist,es,lib 文件夹是否存在，存在表示编译成功
 npm login # 登陆npm
 npm publish # 发布

文档网站发布

rm -rf docs/dist  # 移除文件

npm run build    # 编译文件

快速上手

安装

# 通过 npm 安装
npm i jyh5vlib -S

# 通过 yarn 安装
yarn add jyh5vlib

引入组件

方式一. 自动按需引入组件 (推荐)

babel-plugin-import 是一款 babel 插件，它会在编译过程中将 import 的写法自动转换为按需引入的方式

# 安装插件
npm i babel-plugin-import -D

// 在.babelrc 中添加配置
// 注意：webpack 1 无需设置 libraryDirectory
{
  "plugins": [
    ["import", {
      "libraryName": "jy5vlib",
      "libraryDirectory": "es",
      "style": true
    }]
  ]
}

// 对于使用 babel7 的用户，可以在 babel.config.js 中配置
module.exports = {
  plugins: [
    ['import', {
      libraryName: 'jyh5vlib',
      libraryDirectory: 'es',
      style: true
    }, 'jyh5vlib']
  ]
};

// 接着你可以在代码中直接引入 jyh5vlib 组件
// 插件会自动将代码转化为方式二中的按需引入形式
import { Button } from 'jyh5vlib';

如果你在使用 TypeScript，可以使用 ts-import-plugin 实现按需引入

方式二. 手动按需引入组件

在不使用插件的情况下，可以手动引入需要的组件

import Button from 'jyh5vlib/lib/button';
import 'jyh5vlib/lib/button/style';

方式三. 导入所有组件

JYh5vlib 支持一次性导入所有组件，引入所有组件会增加代码包体积，因此不推荐这种做法

import Vue from 'vue';
import JYh5vlib from 'jyh5vlib';
import 'jyh5vlib/lib/index.css';

Vue.use(JYh5vlib);

注意：配置 babel-plugin-import 插件后，将不允许以这种方式导入组件

其他

Rem 适配

JY5vlib 中的样式默认使用px作为单位，如果需要使用rem单位，推荐使用以下两个工具：

• postcss-pxtorem 是一款 postcss 插件，用于将单位转化为 rem
• lib-flexible 用于设置 rem 基准值

PostCSS 配置

下面提供了一份基本的 postcss 配置，可以在此配置的基础上根据项目需求进行修改

module.exports = {
  plugins: {
    'autoprefixer': {
      browsers: ['Android >= 4.0', 'iOS >= 7']
    },
    'postcss-pxtorem': {
      rootValue: 37.5,
      propList: ['*']
    }
  }
}

注意：在配置 postcss-loader 时，应避免 ignore node_modules 目录，这会导致 JY5vlib 的样式无法被编译

底部安全区适配

iPhone X 等机型底部存在底部指示条，指示条的操作区域与页面底部存在重合，容易导致用户误操作，因此我们需要针对这些机型进行底部安全区适配。JY5vlib 中部分组件提供了safe-area-inset-bottom属性，设置该属性后，即可在对应的机型上开启适配，如下示例：

<!-- 在 head 标签中添加 meta 标签，并设置 viewport-fit=cover 值 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, viewport-fit=cover">

<!-- 开启 safe-area-inset-bottom 属性 -->
<jy-number-keyboard safe-area-inset-bottom />