碧有单移动端组件库 (@byd-modules/components-h5)

基于 Vue 2.7 + Vant 2.x 的移动端组件库，专为碧有单项目定制开发。

技术栈

• Vue: 2.7.x
• Vant: 2.x
• 样式: Less
• 构建工具: Webpack 5
• 代码规范: ESLint + Prettier

兼容性

支持现代浏览器以及以下版本：

• IE >= 10
• Chrome >= 48
• iOS >= 7
• Android >= 5.0

安装

npm install @byd-modules/components-h5

使用方式

完整引入

import Vue from 'vue';
import BydComponents from '@byd-modules/components-h5';
import '@byd-modules/components-h5/lib/style/index.css';

Vue.use(BydComponents);

按需引入

npm i babel-plugin-import -D
// 在.babelrc 中添加配置
// 注意：webpack 1 无需设置 libraryDirectory
{
  "plugins": [
    ["import", {
      "libraryName": "@byd-modules/components-h5",
      "libraryDirectory": "lib",
      "style": (name) => {
        const componentName = name.replace('@byd-modules/components-h5/lib/', '')
        return `@byd-modules/components-h5/lib/style/${componentName}.css`
      }
    }]
  ]
}

import { BydSelectPanel } from '@byd-modules/components-h5';

组件列表

BydSelectPanel 级联选择弹出面板

基础用法

开发

安装依赖

npm install

启动开发服务器

npm run dev

构建组件库

npm run build:lib

代码检查

npm run lint

代码格式化

npm run lint:fix

目录结构

├── packages/           # 组件源码
│   ├── selectPanel/    # 级联选择面板
│   └── index.js       # 组件库入口
├── src/               # 开发测试代码
│   ├── App.vue        # 测试应用
│   ├── main.js        # 应用入口
│   └── index.html     # HTML模板
├── lib/               # 构建输出目录
├── webpack.*.js       # Webpack配置文件
└── package.json       # 项目配置

发布

构建完成后，只会发布 lib 和 packages 目录到 npm。

npm run build:lib
npm publish

License

MIT