Needling Perl Mongers

    @logwire/logwire-wms-pda-ui

    1.1.19 • Public • Published

    #logwire-wms-npm 组件库 开发说明

    描述

    该组件主要用于运匠科技WMS产品手持PDA前端页面,其中部分组件是基于vant进行的二次开发。

    ##使用

    // 在项目的main.js中引入
    
    import logwireWMSUI from 'logwire-wms-pda-ui'
    
    import 'logwire-wms-pda-ui/src/assets/css/index.less'
    
    Vue.use(logwireWMSUI)

    主题定制

    //在项目的vue.config.js中
    
    module.exports = {
      css: {
        loaderOptions: {
          less: {
            modifyVars: {
              'normalButtonBackgroundColor': '#49c51a',
              '@mainButtonBackgroundColor': '#c5a31a'
            }
          }
        }
      }
    }

    技术栈

    vue、webpack、vant

    目录结构

    ├── dist  // 打包后的出口文件
    ├── src  // 全部开发都在此
    │   ├── api  // 标准功能需要的接口
    │   │   ├── login.js  // 每个页面应当独立创建一个js文件
    │   │   ├── task.js
    │   ├── assets  // 静态资源
    │   │   ├── css   // 样式    
    │   │   │   ├── var.less   // 固定目录-提供项目样式修改的变量名 
    │   │   │   ├── index.less   // 固定目录-导出的统一目录,所有组件都应当在此处导出
    │   │   │   ├── LwButton.less   // 样式名应当与组件名保持一致  
    │   │   ├── img  // 图片资源 
    │   ├── components // 基础组件    
    │   │   ├── LwButton // 组件,命名方式应当使用大驼峰 
    │   │   │   ├── imgUploadAxios.js // 提供安装方法
    │   │   │   ├── index.vue // 组件 (css样式应当与代码解耦)
    │   ├── model // 标准的公共模块
    │   │   ├── LwButton // 页面,命名方式应当使用大驼峰 
    │   │   │   ├── imgUploadAxios.js // 提供安装方法
    │   │   │   ├── index.vue // 组件 (css样式应当与代码解耦)
    │   ├── utils // 公共方法
    │   │   ├── imgUploadAxios.js // 固定文件 - 方法统一的导出文件
    │   │   ├── date.js // 方法
    │   ├── views // 页面  
    │   │   ├── task // 功能模块的名字    
    │   │   │   ├── LwTab // 页面的名字   
    │   │   │   │   ├── imgUploadAxios.js // 提供安装方法
    │   │   │   │   ├── index.vue // 组件 (css样式应当与代码解耦)
    │   │   │   ├── LwContent.vue // 页面的名字   
    │   │   │   │   ├── imgUploadAxios.js // 提供安装方法
    │   │   │   │   ├── index.vue // 组件 (css样式应当与代码解耦)
    

    命名规则

    接口(api) - 文件命名应当和views中业务文件夹名字相同,接口名应当和后端接口名一致

    静态资源(assets-css) - 文件使用驼峰命名,样式如果注册到全局应当在选择器前加入lw-global前缀
    Ps:lw-global-xxx

    静态资源(assets-img) - 文件使用驼峰命名

    组件(components) - 应当使用驼峰命名且必须以lw开头
    Ps:lwButton.vue

    模块(model) - 应当使用驼峰命名且必须以lw开头
    Ps:lwButton.vue

    公共方法(utils) - 基于不同的功能创建不同的js文件,方法和文件名应当使用驼峰命名,且方法名前应当加入lw

    页面(views) - 文件夹表明一个业务类型,使用驼峰命名。且所有的业务应当在此文件夹内形成闭环,尽量避免业务与业务之间的页面嵌套,文件夹内页面命名方式参照组件规则执行

    开发规范

    所有.vue/.js/.less文件在代码最顶部加入如下内容

    <!--
      组件的名称
      @author 作者
      @date: 创建时间(yyyy-MM-dd)
    -->

    所有的function应当加入如下信息

    /**
     * 方法的名称
     * @author 作者
     * @param {参数类型} key 参数描述
     * @returns [*] 返回数据
     */

    Install

    npm i @logwire/logwire-wms-pda-ui

    DownloadsWeekly Downloads

    87

    Version

    1.1.19

    License

    MIT

    Unpacked Size

    6.57 MB

    Total Files

    557

    Last publish

    Collaborators

    • gongchangyueban
    • logwire-wms