懒人移动端通用组件库lan-ui

REM适配

安装：npm install postcss-pxtorem --save
设计稿尺寸统一：750px
切图标准：设计稿尺寸/2（如750/2）

Npm scripts

$ npm run build             # 打包编译代码
$ npm run dev               # 启动本地开发服务
$ npm run doc-dev           # 启动本地开发服务（说明文档）
$ npm run doc-build         # 打包编译代码（说明文档）
$ npm run demo-build        # 打包编译代码（demo示例）
$ npm run doc-demo-build    # 打包编译代码（同时打包demo示例及说明文档）
$ npm run release           # git发版（含npm publish）
$ npm run release-docs      # git发版 docs
$ npm run lint              # 使用eslint来检查并修复代码
$ npm run unit              # 单元测试
$ npm run codecov           # 代码覆盖率
$ npm run test              # 单元测试+代码覆盖率
$ npm run cm                # Commitizen规范化git提交（npm run cz代替git commit）

目录结构说明

.
├── assets                       # 图片资源（未压缩未打包）
├── build                        # webpack打包配置文件
│   ├── docment                  # 文档打包文件配置
│       ├── build.js             # 文档生产打包入口
│       ├── dev-server.js        # 文档开发打包入口
│       ├── webpack.dev.conf.js  # 文档开发打包配置
│       ├── webpack.prod.conf.js # 文档生产打包配置
│   ├── example                  # 示例打包文件配置
│       ├── build.js             # 示例生产打包入口
│       ├── webpack.prod.conf.js # 示例生产打包配置
│   ├── release                  # git发版配置（暂不使用）
│       ├── docs.sh              # git提交文档及示例配置
│       ├── publish.sh           # git提交源码及发布npm配置
│   ├── build.js                 # 源码生产打包入口
│   ├── check-versions.js        # node/npm版本检查
│   ├── dev-client.js            # 页面热加载配置
│   ├── dev-server.js            # 源码开发打包入口
│   ├── util.js                  # 样式loader配置（包括css-loader,postcss-loader,vue-style-loader,也进入的less-loader,sass-loader）
│   ├── vue-loader.conf.js       # 配置生产css源码map
│   ├── webpack.base.conf.js     # 打包基础配置（指定打包的入口的文件目录，引用的loader模块（eslint-loader,图片，字体，说明文档））
│   ├── webpack.dev.conf.js      # 源码开发打包配置
│   ├── webpack.modules.conf.js  # 源码单独模块打包配置
│   ├── webpack.prod.conf.js     # 源码生产打包配置
│   └── webpack.test.conf.js     # 源码测试打包配置
│
├── config                    
│   ├── dev.env.js              # 开发模式
│   ├── index.js                # 打包配置入口（源码开发/生产打包，说明文档开发/生产打包，示例开发/生产打包）
│   ├── prod.env.js             # 生产模式
│   └── test.env.js             # 测试模式
│
├── docs                    # 打包后文档说明文件(含示例)
│   ├── css                  
│   ├── example             # 打包后示例文件
│       ├── css              
│       ├── fonts            
│       ├── js               
│       └── index.html	     
│   ├── fonts                
│   ├── img                  
│   ├── js                   
│   └── index.html       
│    
├── document                     # 文档说明源文件
│   ├── common                   # 通用
│       ├── config               # 菜单配置 
│          └── menu.json         # 文档说明左侧菜单配置
│       ├── js                   # 通用js
│           ├── ajax             # 封装的数据请求方法（ajax(url),默认get方式）
│           ├── directive        # 引用lighlight
│           ├── lighlight        # web语法突出显示
│           └── utils            # 通用方法（设置获取本地缓存，获取当前的使用语言，设置文档的链接地址，需要修改）
│       ├── stylus               # 样式
│           ├── base             # 基础样式表
│           ├── index            # 样式表引用入口
│           └── md               # 文档说明样式（可修改文档样式）
│   ├── components               # 组件
│       ├── back                 
│           ├── back.svg         # 返回图标
│           └── back.vue         # 返回首页组件
│       ├── badge                
│           └── badge.vue        # github数据展示（stars,forks,watchers）
│       ├── display              
│           ├── display.vue      # 文档中示例的外层的框架
│           ├── iphoneX.png      # 示例iphone的底图
│           └── phone.png        # 
│       ├── docs                 # 文档模块
│           ├── en-US            # * 英文文档说明（含所有组件的md文件，如需要英文文档，新增组件需要添加）
│           ├── zh-CN            # 中文文档说明
│           ├── en-US.vue        # 英文入口
│           └── zh-CN.vue        # 中文入口  
│       ├── example              # 示例
│           ├── example-QR.png   # 示例二维码
│           └── example.vue      # 示例页面  
│       ├── footer         
│           └── footer.vue       # 底部通用版权说明
│       ├── home                 # 首页入口
│           ├── en-US.vue        # 英文导航菜单
│           ├── home.vue         # * 首页入口组件（有修改，屏蔽了语言切换，目前文档只做了中文）
│           ├── logo.png         # logo
│           ├── nav.svg          # 菜单图标（同menu.svg）
│           └── zh-CN.vue        # 中文导航菜单
│       ├── index                # * 文档首页
│           ├── lan.png          # 首页banner图
│           ├── en-US.vue        # 英文首页内容
│           ├── experience.png   # 体验极致图片
│           ├── index.vue        # 首页组件
│           ├── quality.png      # 质量可靠图片
│           ├── scalability.png  # 扩展性想图片
│           ├── standard.png     # 标准规范图片
│           ├── zh-CN.vue        # 中文首页内容

│       ├── lang            
│           └── lang.vue         # 获取当前语言（中英文切换）
│       ├── nav-loading     
│           └── nav-loading.vue  # 导航底部页面加载loading效果
│       ├── side-list       
│           └── side-list        # 侧导航入口引用路由跳转
│       ├── side-nav        
│           └── side-nav         # 侧导航菜单组件
│       ├── viewport             # 文档主要内容组件
│           ├── close.svg        # 关闭图标        
│           ├── menu.svg         # 菜单图标   
│           └── viewport.vue     # 说明文档主要内容区     
│   ├── router                   # 路由
│       ├── index.js             # example中英文，首页路由配置
│       ├── router.js            # 文档菜单路由引入配置
│   ├── App.vue                  # 组件入口
│   ├── logo.ico                 # 地址栏ico
│   ├── index.html               # 文档页面入口（需要修改ico）
│   └── main.js                  # 文档入口文件配置
│
├── example                 # 示例源文件
│   ├── components          # 示例通用组件（包括布局，通用的组件）
│   ├── data                # 用于示例使用的数据有js和json文件2种形（组件有需要可以添加）
│   ├── modules             # 对图片的处理（检查图片是否被压扁，转base，图片压缩等，直接引用腾讯的js）
│   ├── pages               # 组件的示例页面
│   ├── router              # 
│       ├── index.js        # 路由配置入口
│       ├── router.js       # 示例路由配置
│   ├── App.vue             # 组件入口，示例菜单配置
│   ├── index.html          # 示例入口页面（需要修改ico）
│   └── main.js             # 示例入口文件配置
│
├── lib                     # 组件打包编译文件
│   ├── XXXX                # 组件文件
│       ├── XXXXX.min.js    # 组件压缩后js
│       ├── XXXXX.min.css   # 组件压缩后css
│       ├── index.js        # 组件打包后js
│       └── style.css       # 组件打包后css
│   ├── fonts               # 打包后字体包
│   ├── lan.min.css         # 整个组件库压缩后css
│   ├── lan.min.js          # 整个组件库压缩后js
│   ├── index.js            # 整个组件库打包后css
│   └── style.css           # 整个组件库打包后js
│
├── node_modules            # 包文件
│
├── src                           # 组件源码目录
│   ├── common                    # 
│       ├── data                  # * 组件用到的数据源（银行，证件类型，所在地区，国籍/地区，所在省市）
│       ├── helpers               # 通用方法（具体需要细看作用）
│       ├── icon                  # 字体icon
│           ├── cube-icon.styl    # 自定义cube ui字体icon样式
│           ├── cubeic.tff        # 自定义cube ui tff格式字体icon
│           ├── cubeic.woff       # 自定义cube ui woff格式字体icon
│           ├── lan-icon.styl # 自定义字体icon样式 
│           ├── lanic.tff     # 自定义tff格式字体icon
│           └── lanic.woff    # 自定义woff格式字体icon 
│       ├── lang    
│           ├── date.js           # 日期格式化方法
│           └── string.js         # 字符串大小写转化方法            
│       ├── locale
│           └── index.js          # 本地化配置（包括语言、提示语）   
│       ├── mixins                # 混合对象配置（basic-picker,deprecated.js,group-col,input,locale,picker,popup,scroll,visibility）
│       └── stylus                # 组件样式
│           ├── theme             # 主题样式
│               ├── default.styl  # 默认的主题样式
│           ├── var               # 样式变量（含颜色、字体大小、盒子阴影）
│           ├── base.styl         # 基础样式
│           ├── common.styl       # 组件公共样式 （新增）
│           ├── index.styl        # 样式配置入口（校验，混合，重置，基础，cube ui icon，lan自定义样式）
│           ├── mixin.styl        # 混合样式
│           ├── reset.styl        # 重置样式
│           └── variable.styl     # 校验样式配置入口（颜色、大小、盒子阴影、主题默认样式）          
│   ├── components                # 组件源码文件（组件vue,相关的js，图片（2倍图，3倍图））
│   └── locale/lang               # 本地化中英文语言配置
│       ├── en-US.js              # 英文配置
│		└── zh-CN.js              # 中文配置
│   ├── modules                   # 组件模块导出单文件（模块导出文件，每个组件对应一个文件夹）
│       ├── XXXXXXX组件
│           └── index.js
│   ├── index.js                  # 整体模块导出
│   ├── module.js                 # 组件模块导出总文件（单独模块导出）
│   └── rem.js                    # 适配，设置根字体大小
│
├── tests/unit              # 测试目录
│   ├── coverage            # 生成的代码覆盖率浏览网页
│   ├── fake                # 单元测试
│   ├── specs               # * 单元测试主要代码目录（每个组件一个单元测试文件）
│   ├── utils               # 单元测试通用方法（create-vue创建vue对象，event事件封装，file文件封装，xhr请求封装）
│   ├── .eslintrc           # eslint配置
│   ├── index.js            # 单元测试入口配置
│   └── karma.conf.js       # 单元测试配置
│
├── types                   # 
│   ├── component.d.ts      # 
│   ├── lan-ui.d.ts          # 
│   └── index.d.ts          # 
│
├── .babelrc                # 
├── .editorconfig           # 代码规范配置
├── .eslintignore           # eslint忽略文件配置
├── .eslintrc.js            # eslint配置
├── .gitignore              # git忽略文件配置
├── .travis.yml             # 持续集成构建项目（git push时自动进行编译以及运行单测）
├── CONTRIBUTING.md         # 贡献说明
├── LINCENSE                # 版权说明
├── package-lock.json       # 锁定当前安装包的版本号
├── package.json            # 包配置文件
├── postcss.config.js       # css预处理(适配)
├── README_zh-CN.md         # 中文文档说明（需要修改为lan-ui的说明）
├── README.md               # 说明文档
└── yarn.lock