mybankmobile-testppp v0.1.0

csii.vx3.mobile

该工程需要vue cli 3.3+

npm install -g @vue/cli

安装依赖

npm install

开发模式下编译并热更新

npm start

or

npm run serve

生产模式下编译并压缩

npm run build

执行ESLint检查，并修复

npm run lint

主题样式定制

git clone http://172.16.60.132/vx-git/vx-npm/mobile-theme
#根据该仓库README.md构建不同命名空间的UI库样式，放置到themes目录

自定义配置

查看 Configuration Reference.

使用指引

本原型工程使用mock功能

注意：使用时可参考src/mock中的例子。

1、直接在data下面添加接口对应的json文件

例如InnerPre.json，请求时InnerPre.do，名称一一对应

2、配置mock数据，注释该选项即可,项目中默认打开即不使用模拟数据

注意：若要转发到后台，在env.development文件中请放开此处

# 标记当前是 No Mock 构建
# VUE_APP_BUILD_MODE=nomock

本原型工程保存后台返回数据

1、 在vue.config.js文件中配置转发的前缀及后端地址target

默认：转发前缀为'/pweb/' target为'http://localhost:9001'

......
proxy: {
  '/pweb/': {
    target: 'http://localhost:9001',
    changeOrigin: true,
    onProxyRes: saveJSON ? recordProxyJson : null
  }
}
......

2、 env.development文件中配置是否保存模拟数据，默认false

# 是否启用 记录 JSON 功能
APP_SAVE_JSON = true

3、 配置不使用Mock

若要转发到后台，env.development文件中请放开此处

# 标记当前是 No Mock 构建
VUE_APP_BUILD_MODE=nomock

4、其他Vue工程 mock功能迁移

请按照管理端修改本地项目，步骤如下：

1. 本地代码先提交git或svn

2. 使用管理端中mock文件夹全部覆盖本地项目对应文件夹

3. 使用管理端中vue.config.js覆盖本地项目对应文件

4. 使用管理端中.env,.env.development覆盖本地项目对应文件

5. 使用管理端中package.json覆盖本地项目对应文件，并重新安装

6. 与git或svn对比，还原被覆盖的自定义改动

7. 进行测试，测试没有提交代码

开发环境的统一-编辑器

编辑器推荐使用Visual Studio Code。vscode通过插件可以支持ESLint和editorconfig for VS Code

其他推荐安装插件：

Vetur Vue语法高亮，错误检查，格式化，自动提示等,注意：要禁用【Beautify】插件

在VS code 的配置文件settings.json中添加以下配置

// 保存时格式化
  "editor.formatOnSave": true,
  "vetur.format.defaultFormatter.html": "prettyhtml",
  // vetur 的自定义设置
  "vetur.format.defaultFormatterOptions": {
    "prettier": {
      // prettier 设置强制单引号
      "singleQuote": true,
      // prettier 设置语句末尾不加分号
      "semi": false
    }
  }

Auto Close Tag 自动闭合HTML/XML标签

Auto Rename Tag 自动完成另一侧标签的同步修改

HTML CSS Support 让 html 标签上写class 智能提示当前项目所支持的样式

编写代码时，须按eslint规范，进行格式化。 （原型自带的eslint语法检测及修复工具 npm run lint）

CSS

使用rem方案适配屏幕，postcss-pxtorem工具自动将px单位转换成rem

注意：自动转换在设计图尺寸为 750 时可用，因为所用第三方组件库是基于 750 尺寸设计图的。

公共的CSS代码放入common.css中，并写好注释

CSS命名推荐使用BEM规范

未使用任何CSS预编译工具，如有兴趣可以自行加入SCSS LESS 等

第三方组件库

@csii/vx-mobile中 Button,Amount,Dialog,Toast,Field,FieldItem,InputItem 这7个组件使用频率较高，已在./src/components/index.js注册为全局组件，避免频繁引入。

实际开发中，如果发现某一个组件使用频率很高，可以考虑在./src/components/index.js 中将其注册为全局组件。推荐在这个文件中管理所有全局组件。

插件

目前工程中的插件主要有：axios、vee-validate

由于插件使用时往往需要一些自定义的设置，比如axios的拦截器配置，vee-validate的本地化配置等。因此，插件的引入和use都放在了plugins文件夹中，入口文件只引用了./plugins。后期如要新增插件，推荐按同样方式放入plugins目录管理

表单校验

根据@csii/vx-mobile官网的示例，把input-item封装成了input-validate，使用时参数和input-item基本一致。

需要校验时则要加上name v-validate errors 三个属性

vee-validate内置了需多校验规则，如required、min 、max等，使用时可以查看文档

也可以参照./plugins/vee-validate/rules.js中的示例来自定义规则

对应的name如果想要在报错提示时显示中文，需要在./plugins/vee-validate/attributes.js中配置数据字典

简单的表单校验示例可以参考pages/demo/DemoForm.vue

发送http请求

使用axios插件发送http请求，在./plugins/axios/config.js中更改插件默认配置

默认将create产生的实例挂载到了Vue.prototype，所以在 vue实例 中，可以直接通过this.$http或this.$remote或者this.$axios调用get、post方法

分包

有时候为配合客户端信息流框架，需要按功能分包

新增了pkg.js和util.js用于按功能分包

开发时按照正常单页应用开发，包括入口文件、路由配置等。需要分包时，在/src目录下新增/src/pkg目录，这个目录下的每个目录名都将作为打包后的包名。如：/src/pkg/test1

/src/pkg/test1 目录下，需要包含main.js 和 router.js两个文件，单独配置这个功能所用到的页面和其他依赖

配置完成后执行:

npm run pkg

构建生产版本

若node出现内存溢出

1、判断是否安装相关依赖包（cross-env、increase-memory-limit），若没有请执行， 若已经安装请跳过

npm install cross-env increase-memory-limit -D

or 重新安装所有依赖

npm install

2、安装完依赖后，请执行

npm run fix-memory-limit

3、若是mac电脑，安装完后，运行npm run build可能会报错，请按照提醒进行修改

例如：node_modules/.bin/vue-cli-service文件中有错误

const requiredVersion = require('../package.json').engines.node --max-old-space-size=4096

改为

const requiredVersion = require('../package.json').engines.node

性能优化

配置gzip

1、在生产环境配置.env.nomock文件中VUE_APP_GZIP为true,即可在html、css、js文件大小大于10kb时进行文件gzip,减少传输的时间,需要web服务器支持gzip，进行相应的配置

• 若需要使用请参考该链接进行服务器配置前端性能优化之gzip

 # 是否对html、css、js进行gzip
 VUE_APP_GZIP=true

git修改文件名字大小写

例如修改转账录入页面：TransferPre.vue修改为transferPre.vue 1、将TransferPre.vue修改为aTransfer.vue 2、git add . （注意：不要commit！！！ 3、将aTransferPre.vue修改为transferPre.vue 4、git add . 注意：这是文件修改的方法。