tian-yan-yan

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

描述

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

##使用
``js
// 在项目的main.js中引入

import logwireWMSUI from 'logwire-wms-pda-ui'

import 'logwire-wms-pda-ui/src/assets/css/index.less'

Vue.use(logwireWMSUI)
`

主题定制

`js
//在项目的vue.config.js中

module.exports = {
css: {
loaderOptions: {
less: {
modifyVars: {
'normalButtonBackgroundColor': '#49c51a',
'@mainButtonBackgroundColor': '#c5a31a'
}
}
}
}
}
`

技术栈

vue、webpack、vant

目录结构

`text
├── 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） - 文件使用驼峰命名，样式如果注册到全局应当在选择器前加入ty-global前缀

Ps：ty-global-xxx

静态资源（assets-img） - 文件使用驼峰命名

组件（components） - 应当使用驼峰命名且必须以ty开头

Ps：tyButton.vue

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

Ps：tyButton.vue

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

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

开发规范

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

`
所有的function应当加入如下信息
`javascript
/**
* 方法的名称
* @author 作者
* @param {参数类型} key 参数描述
@returns [] 返回数据
*/
``