logwire-wms-pda-ui

描述

>该组件主要用于运匠科技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） - 文件使用驼峰命名，样式如果注册到全局应当在选择器前加入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文件在代码最顶部加入如下内容 ```html ``` 所有的function应当加入如下信息 ```javascript / 方法的名称 @author 作者 @param {参数类型} key 参数描述 @returns 返回数据 / ```