ebiz-h5

介绍

• UI 框架使用Vant，它是轻量、可靠的移动端 Vue 组件库
• 组件导入方式和 viewport 适配参考：快速上手

技术栈

Vue2 + Vue-Router + Axios + Vuex + Vant + Vue-Loader + Vue-Cli3.0 + ...

目录结构

.
├── node_modules                                // npm/yarn安装的项目依赖模块
├── public                                      // 静态资源目录
├── src                                         // 源码目录
│   ├── api                                     // 网络请求文件
│   │   ├── app                                 // 基础工程网络请求文件
│   │   │   ├── user.js                         // 用户模块api请求
│   │   ├── example
│   │   │   └── ***                             // 示例模块api请求
│   ├── assets                                  // 资源目录
│   │   ├── fonts                               // 字体文件
│   │   ├── images                              // 图片文件
│   │   |   ├── app                             // 基础工程图片
│   │   |   ├── 404_img                         // 404图片
│   │   ├── js
│   │   |   ├── utils                           //工具类js
│   │   |   |   ├── get-url.js                  //根据设置获取请求url
│   │   |   |   ├── jump.js                     //跳转文件 bridge or router
│   │   |   |   ├── premission.js               //权限控制
│   │   |   |   ├── request.js                  //拦截器
│   │   |   |   ├── validate.js                 //表单校验
│   │   |   ├── vendor                          //第三方js
│   │   |   ├── common.js                       //全局js方法
│   │   |   ├── business-common.js              //业务相关全局js方法
│   │   ├── sass
│   │   |   └── common.scss                     // 样式出口文件
│   │   |   └── vant-ui.scss                    // vant样式
│   │   |   └── minix.scss                      // 样式配置
│   │   |   └── transition.scss                 // 动画样式
│   │   |   └── utils.scss                      // 工具样式
│   │   |   └── variables.scss                  // 变量文件
│   ├── components                              // 全局组件
│   |   ├── common                              //公共组件
│   │   |   └── Jump                            // 跳转组件
│   ├── config                                  // 配置文件
│   |   ├── index.js                            // 环境配置
│   |   ├── urlMap.js                           // api url配置
│   ├── filters
│   |   ├── index.js                            // 过滤器
│   ├── router
│   |   ├── app                                 // 基础工程路由
│   |   ├── example                             // 示例路由
│   |   ├── index.js                            // 路由配置
│   ├── store
│   |   ├── modules                             // 状态模块
│   |   ├── getters.js                          // 配置getters
│   |   ├── index.js                            // 引用vuex，创建store
│   ├── views
│   |   ├── app                                 // 基础工程页面
│   |   |   ├── layout                          // layout：导航栏、侧边栏、主窗口等
│   |   |   ├── login                           // 登录页面
│   |   |   ├── 404.vue                         // 404页面
│   |   |   ├── home.vue                        // 首页
│   |   ├── example                             // 示例页面，不一一列举
│   ├── App.vue                                 // 页面入口文件
│   ├── main.js                                 // 程序入口文件，加载各种公共组件
├── tests                                       // 测试相关文件
├── .env.development                            // 开发环境配置
├── .env.production                             // 生产环境配置
├── .env.staging                                // staging环境配置
├── .eslintrc.js                                // eslint配置
├── babel.config.js                             // 转码配置
├── .prettierrc                                 // prettier配置
├── jest.config.js                              // 测试配置
├── package.json                                // 安装包列表文件
├── postcss.config.js                           // 样式配置
├── vue.config.js                               // vue工程配置
.

项目运行

git clone http://112.124.100.131/dcrs/ebiz-h5.git

cd ebiz-h5

npm install --global --production window-build-tools (全局安装依赖)

npm install --global node-gyp (全局安装依赖)

yarn install（推荐使用yarn）

yarn serve（开发环境）

项目打包

# 测试环境打包
yarn run build:stage（测试环境打包）

# 线上环境打包
yarn run build:prod（线上环境打包）

预发环境打包预览、文件检查等

# 代码检查
yarn run lint

# 代码检查修复
yarn run lint:fix

#代码格式化
yarn run format

快速开始项目

1、src>>api 目录下创建项目所需 http 请求文件夹
2、src>>assets 目录下创建项目所需的 js image 文件夹，以及 scss 文件
3、src>>router 目录下创建所需路由文件夹
4、src>>store>>modules 目录下创建所需状态管理文件

主要功能点介绍

• http 请求文件
  • 模块划分：app 为基础工程模块、其他项目需另建文件夹
  • 拦截器：超时设置、请求头加 token、统一处理异常、token 异常重新登录等
• mock 数据
  • 工具 rap2 、参考链接
  • 通过 config 文件夹下 urlMap.js，配置 mock 接口请求
• 环境配置
  • 在 config 文件夹下 index.js，通过 process.env.VUE_APP_FLAG 对环境进行配置
  • 跨域问题可通过后台解决，也可设置前端代理 proxy
• router
  • 模块划分
  • 路由拦截
  • 路由懒加载
• 权限控制
  • 可在 permission.js 里设置黑白名单