#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） - 应当使用驼峰命名且必须以ty开头 Ps：tyButton.vue

模块（model） - 应当使用驼峰命名且必须以ty开头 Ps：tyButton.vue

公共方法（utils） - 基于不同的功能创建不同的js文件，方法和文件名应当使用驼峰命名，且方法名前应当加入ty

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

开发规范

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

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

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

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