1.0.0-beta.2 • Published 4 years ago

patd-mobile v1.0.0-beta.2

Weekly downloads
5
License
MIT
Repository
-
Last release
4 years ago

Patd Mobile

Patd Mobile 是快乐平安 WebSpace 团队开发的移动端 Vue 组件库,基于 Patd 设计风格,在平安内部开源.

文档和 Demo

安装依赖

运行 npm i 或者 yarn

Demo 运行

# 本地开发环境启动
npm run serve
# demo 打包
npm run build

打包生成目录 dist/demo

文档生成和预览

  • 生成文档,运行 npm run doc
  • docsfiy 风格文档本地预览

    • vscode 安装插件Live Server
    • 找到 docs/index.html 文件,右键选择 Open With Live Server
    • 浏览器打开后,地址栏删除 index.html 即可正常预览
  • 预览 Patd 风格文档 ,运行 npm run serve:patd

  • 打包 Patd 风格文档 ,运行 npm run build:patd
  • 同时打包 demo 和文档,运行 npm run build:doc

打包生成目录 dist/patd-docs,刷新文档,重新运行 npm run doc

组件打包

  • 所有组件打包为一个文件,运行 npm run build:lib
  • 每个组件单独打包,运行 npm run build:packages
  • 样式打包,运行npm run build:css

打包以上所有,运行npm run build:all

NPM 组件发布

  • 内网发布
npm publish --registry=http://maven.paic.com.cn/repository/npm-releases/

内网发布参考 http://aodi.paic.com.cn/index.html#/forum/detail?tid=12598

目录结构

└── components                                     // 组件库目录
    ├── accordion                                  // 组件目录
        └── demo                                   // 组件demo目录
            └── index.vue                          // 组件demo页面
        ├── index.js                               // 组件默认导出文件
        ├── index.less                             // 组件独立样式文件
        ├── accordion.vue                          // 组件源码文件
        ├── README.md                              // 组件文档描述文件
        ....
    ....                                           // 其它组件目录
    ├── style                                      // 公共样式文件目录
        ├── anim.less                              // 动画样式
        ├── hairline.less                          // 1px样式
        ├── theme.less                             // 样式变量定义
        ├── utils.less                             // 工具样式库

    ├── utils                                      // 工具函数库
        ├── index.js                               // 常用工具函数
        ├── event.js                               // 事件工具函数
        ....                                       // 其它工具函数
    ├── base.less                                  // 组件基础样式整合
    ├── index.js                                   // 组件所有组件导出整合
    └── index.less                                 // 组件所有组件样式整合
└── config                                         // 执行命令配置目录
    ├── demo.js                                    // 组件demo 配置
    ├── docs.js                                    // 组件文档生成 配置
    ├── packages.js                                // 组件独立打包 配置
    └── patd.js                                    // patd文档风格 配置
└── demo                                           // demo目录
    ├── App.vue                                    // demo初始化文件
    ├── Home.vue                                   // demo主页
    ├── index.js                                   // demo入口文件
    ├── menu.js                                    // 文档目录配置文件
    └── router.js                                  // demo路由配置文件
└── dist                                           // 打包生成目录
      ....
└── docs                                           // docsfiy风格文档目录
    ├── _media                                     // 文档静态资源目录
        ....
    ├── _public                                    // markdown文档生成模版目录
        ├── componentTemp.md                       // 组件文档生成模版
        ├── navTemp.md                             // docsfiy风格文档版本生成模版
        └── sideTemp.md                            // docsfiy风格文档侧边栏生成模版
    ├── v1.xx.xx.xx                                // markdown文档生成存放目录
    ├── index.html                                 // docsfiy文档主页
    ├── flexible.md                                // 适配指南,patd文档共用此文档
    ├── README.md                                  // 文档主页,patd文档共用此主页
    ├── quickstart.md                              // 快速开始,patd文档共用此文档
    ├── themes.md                                  // 定制皮肤,patd文档共用此文档
    ....                                           // 其它文档
└── lib                                            // 组件全部打包生成目录
    ├── index.umd.js                               // umd模式组件主页文件
    ....                                           // 其它
└── packages                                       // 组件独立打包目录
    ├── accordion                                  // 组件打包目录,与components目录一致
        ├── index.js                               // 组件压缩js文件
    ....                                           // 其它组件

└── patd                                           // patd文档风格目录
    └── assets                                     // 资源目录
        ....
    ├── components                                 // 文档组件目录
        ....
    ├── pages                                      // 文档生成存放目录
        ├── v1.0.0xxx                              // 文档版本 目录
            ....
        ....
    ├── temp                                       // patd文档生成模版目录
        ├── config.js                              // 路由生成模版
        └── pages.ejs                              // 文档生成模版
    ├── routerConfig.js                            // 文档路由配置文件,执行文档生成之后生成
    ....                                           // 其它文件
└── public                                         // webpack打包静态资源目录
    ....
└── themes                                         // 组件样式打包生成目录
    ├── default                                    // 组件默认css样式文件目录
        ├── accordion                              // 组件样式目录,与components目录一致
            └── index.css                          // 组件css样式压缩文件
        ....                                       // 其它组件样式目录
    ├── less                                       // 组件less样式文件目录,从components复制,保留原始结构
        ├── accordion                              // 组件样式目录,与components目录一致
            └── index.less                         // 组件less样式文件
        ....                                       // 其它组件less样式目录
    ....                                           // 其它主题风格目录
├── .browserslistrc                                // 浏览器兼容配置
├── .eslintignore                                  // eslint检查忽略配置
....
├── .npmignore                                     // npm发布忽略文件配置
├── .npmrc                                         // npm内网发布账号信息配置
....
├── CHANGELOG.md                                   // 组件变更记录文档
├── gulpfile.js                                    // 组件样式打包配置
....

组件库维护

欢迎各位前端同学提出宝贵意见

  • 组件问题交流可以加入快乐平安《PATD 组件库交流群》
  • 组件代码问题 Issue 可以从 代码库 develop 创建分支

    分支名称 以 feature/xxx 命名,修改完成提交合并 develop 分支申请

    成功采纳提交,将会在更新日志中体现贡献人