mopro-ui v1.0.3

mopro-ui

简介

• 背景：公司ERP业务主要在PC端，但某些业务需要在手机端操作完成：如在客户现场拍照考察，随时随地根据考察情况评分、上传拍照等，这时，移动端的需求就由此衍生而来；由于ERP业务的相似性，以及移动端需求的增长，通过封装组件库，加快交付效率、降低代码重复率，形成可复用、模板化的移动端交付方式

• mopro-ui是基于vant-cli这款组件库搭建工具，搭建的移动端vue组件库（使用Vue2、Sass）

• 组件库内组件分2部分：

  • 标准组件：依赖vant组件库中已有组件做封装
  • 业务组件：移动端在交付各个项目过程中，总结的业务组件

快速上手

• 安装依赖包：使用yarn或者npm i

• 运行本地开发环境：yarn run dev 或者 npm run dev

• 其它命令：

  • npm run build 构建组件库
  • npm run build-site 构建文档站，在 site 目录生成可用于生产环境的文档站点代码
  • npm run release 发布组件库至npm
  • npm run changelog 基于 commit 记录生成更新日志
  • npm run commit-lint 校验 commit message 的格式是否符合规范

• 开发一个新组件的步骤 1、在src下新增一个文件夹 单个组件的目录如下：

    ```
    button
    ├─ demo             # 示例目录
    │   └─ index.vue   # 组件示例
    ├─ index.vue        # 组件源码
    └─ README.md        # 组件文档
    ```

  2、在vant.config.js下，添加新组件的示例路由:

    ```
    {
        ...
        site: {
            ...,
            nav: [
                ...,
                {title: '基础组件', items: [{path: '', title: ''}]}
            ]
        }
    }
    ```

源代码目录

基于 Vant Cli 搭建的组件库的基本目录结构如下所示：

mopro-ui
├─ src                # 组件源代码
│   ├─ button        # button 组件源代码
│   └─ dialog        # dialog 组件源代码
│
├─ docs               # 静态文档目录
│   ├─ home.md       # 文档首页
│   └─ changelog.md  # 更新日志
│
├─ mds                # 关于vant-cli工具介绍
│   ├─ README.md     # 快速上手
│   └─ commands      # 命令
│   ├─ config        # 配置指南
│   └─ directory     # 目录结构
│   └─ desktop       # 桌面端组件
│
├─ babel.config.js    # Babel 配置文件
├─ vant.config.js     # Vant Cli 配置文件
├─ package.json
└─ README.md

单个组件的目录如下：

button
├─ demo             # 示例目录
│   └─ index.vue   # 组件示例
├─ index.vue        # 组件源码
└─ README.md        # 组件文档

使用 .vue 文件编写组件时，编译后会生成对应的 JS 和 CSS 文件，且 JS 文件中会自动引入 CSS 文件。

如果需要将 JS 和 CSS 解耦，实现主题定制等功能，在编写代码时就要使用独立的 JS 和 CSS 文件，如下所示：

button
├─ demo             # 组件示例
│   └─ index.vue   # 组件示例入口
├─ index.js         # 组件入口
├─ index.less       # 组件样式，可以为 less 或 scss
└─ README.md        # 组件文档

采用这种目录结构时，组件的使用者需要分别引入 JS 和 CSS 文件，也可以通过 babel-plugin-import 自动引入样式。

通过引入样式源文件（less 或 scss）并修改样式变量，可以实现主题定制功能。

构建结果目录

运行 build 命令会在 es 和 lib 目录下生成可用于生产环境的组件代码，结构如下：

project
├─ es               # es 目录下的代码遵循 esmodule 规范
│   ├─ button      # button 组件编译后的代码目录
│   ├─ dialog      # dialog 组件编译后的代码目录
│   └─ index.js    # 引入所有组件的入口，支持 tree shaking
│
└─ lib              # lib 目录下的代码遵循 commonjs 规范
    ├─ button       # button 组件编译后的代码目录
    ├─ dialog       # dialog 组件编译后的代码目录
    ├─ index.js     # 引入所有组件的入口
    ├─ index.less   # 所有组件未编译的样式
    ├─ index.css    # 所有组件打包后的样式，用于 CDN 引入
    ├─ name.js      # 所有组件打包后的脚本，未压缩，用于 CDN 引入
    └─ name.min.js  # 所有组件打包后的脚本，已压缩，用于 CDN 引入

单个组件编译后的目录如下：

button
├─ index.js         # 组件编译后的 JS 文件
├─ index.css        # 组件编译后的 CSS 文件
├─ index.less       # 组件编译前的 CSS 文件，可以为 less 或 scss
└─ style            # 按需引入样式的入口
    ├─ index.js     # 按需引入编译后的样式
    └─ less.js      # 按需引入未编译的样式，可用于主题定制