1.2.2 • Published 4 years ago
@lan-ui/lan-ui v1.2.2
懒人移动端通用组件库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