# vue-pc

## 介绍

- 基于 [vue-element-admin](https://github.com/PanJiaChen/vue-element-admin) 搭建的后台管理系统基础框架
- [文档参考](https://panjiachen.github.io/vue-element-admin-site/)

### 技术栈

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

### 命名规范

- 组件名：大驼峰
- 方法名：小驼峰
- class 类名：连字符(a-b)
- 常量(const)：全大写
- 变量(let)：小驼峰
- 文件夹命名： 一律小写(只允许小写字母、中横杠-，如：a-b)
- Vue 文件命名： 大驼峰式命名法，即每个单词的首字母大写 CamelCase.vue
- css,js,image 等文件命名：一律小写(css/js 文件使用中横杆-，image 使用下划线\_)第三方除外
- 如条件允许： import 进来的变量名及 export 都采用大驼峰形式命名，如 import VueRouter from 'vue-router' 及 export default Common

```javascript
//什么叫“如条件允许”：比如我们需要
import routes from './routers/router'
const router = new VueRouter({
  routes
})
//这种情况下，routes可以用小写，事实上，上面的范例可以换一种写法：
import Routes from './routers/router'
const router = new VueRouter({
  routes: Routes
})
```

## wiki 文档

[wiki 参考文档](http://114.215.252.122:8090/pages/viewpage.action?pageId=13960243)

## 目录结构

```
.
├── build                                       // webpack配置文件
├── node_modules                                // npm/yarn安装的项目依赖模块
├── public                                      // 静态资源目录
├── src                                         // 源码目录
│   ├── api                                     // 网络请求文件
│   │   ├── app                                 // 基础工程网络请求文件
│   │   │   ├── user.js                         // 用户模块api请求
│   │   ├── example
│   │   │   └── table.js                        // 示例模块api请求
│   ├── assets                                  // 资源目录
│   │   ├── fonts                               // 字体文件
│   │   ├── images                              // 图片文件
│   │   |   ├── app                             // 基础工程图片
│   │   |   ├── 404_img                         // 404图片
│   │   ├── js
│   │   |   ├── utils                           //工具类js
│   │   |   |   ├── auth.js                     //token设置
│   │   |   |   ├── get-page-title.js           //获取页面title
│   │   |   |   ├── get-url.js                  //根据设置获取请求url
│   │   |   |   ├── premission.js               //权限控制
│   │   |   |   ├── request.js                  //拦截器
│   │   |   |   ├── settings.js                 //全局设置
│   │   |   |   ├── validate.js                 //表单校验
│   │   |   ├── vendor                          //第三方js
│   │   |   ├── common.js                       //全局js方法
│   │   |   ├── business-common.js              //业务相关全局js方法
│   │   ├── sass
│   │   |   └── common.scss                     // 样式出口文件
│   │   |   └── element-ui.scss                 // element-ui样式
│   │   |   └── minix.scss                      // 样式配置
│   │   |   └── sidebar.scss                    // 侧边栏样式
│   │   |   └── transition.scss                 // 动画样式
│   │   |   └── utils.scss                      // 工具样式
│   │   |   └── variables.scss                  // 变量文件
│   ├── components                              // 公共组件
│   ├── config                                  // 配置文件
│   |   ├── index.js                            // 环境配置
│   |   ├── urlMap.js                           // api url配置
│   ├── filters
│   |   ├── index.js                            // 过滤器
│   ├── icons                                   // svg icon
│   ├── 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.dev                                    // 开发环境配置
├── .env.production                             // 生产环境配置
├── .env.staging                                // staging环境配置
├── .eslintrc.js                                // eslint配置
├── babel.config.js                             // 转码配置
├── jest.config.js                              // 测试配置
├── .prettierrc                                 // prettier配置
├── package.json                                // 安装包列表文件
├── postcss.config.js                           // 样式配置
├── vue.config.js                               // vue工程配置
.
```

## 项目运行

```bash
git clone http://112.124.100.131/base/ebiz-base-vue-pc.git

cd ebiz-base-vue-pc

yarn install（推荐使用yarn）

yarn serve（开发环境）

```

## 项目打包

```bash
# 测试环境打包
yarn run build:envName（测试环境打包）

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

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

```bash
# 代码检查
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 目录下创建所需状态管理文件

##### [注：项目开始前请先配置 vscode 代码检查、格式化](http://115.29.19.195:8090/pages/viewpage.action?pageId=13960404)

## 主要功能点介绍

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

## 浏览器支持

Modern browsers and Internet Explorer 10+.

| [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/edge/edge_48x48.png" alt="IE / Edge" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>IE / Edge | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/firefox/firefox_48x48.png" alt="Firefox" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Firefox | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/chrome/chrome_48x48.png" alt="Chrome" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Chrome | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/safari/safari_48x48.png" alt="Safari" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Safari |
| --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| IE10, IE11, Edge                                                                                                                                                                                                | last 2 versions                                                                                                                                                                                                   | last 2 versions                                                                                                                                                                                               | last 2 versions                                                                                                                                                                                               |

######搭配长附加险 例如：鼎城附加定期寿险 ######长附加险初始化规则挂载 rule041 ######搭配长附加险时如果长附加险有年龄对交费期间(保险期间)的限制规则 挂载规则 rule013 ######搭配规则是 保险期间挂载 rule039 ######限制长附加险的交费期间不能大于保险期间是 rule042 交费期间下挂载 040
