# Vue+TDCore简易前后端分离基本框架
#### Author: liujto by.tiandu
#### Time：2020-03-18
#### 这是一个内部使用的冬冬，只是便于下载放到了网上

后端框架：天度集团TDCore   
前端框架：vant   
vscode中,shift+ctrl+v查看此文档
  

## 框架依赖包：
|模块|版本|注释|
|-|-|-|
|axios|^0.18.0|ajax核心请求模块|
|exif-js|^2.3.0|图片转换处理,上传用到|
|html2canvas|^1.0.0-rc.1|把html生成canvas|
|js-md5|^0.7.3|jsmd5加密| 
|lib-flexible|^0.3.2|px转rem可自行选择|  
|postcss-plugin-px2rem|^0.8.1|px转rem可自行选择|
|vant|^2.2.10|vant框架|
|video.js|^7.5.4|视频播放|
|vue|^2.6.6|核心|
|vue-awesome-swiper|^3.1.3|swiper轮播|   
|vue-router|^3.0.2|路由|   
|vue-video-player|^5.0.2|video播放器|   
|vuex|^3.1.0|核心|
|wangeditor|^3.1.1|富文本编辑器，自行选择|
|weixin-js-sdk|^1.4.0-test|微信jssdk|
|xss|^1.0.6|防止注入|   


# 1.安装
#### 1）执行安装指令 安装所有依赖模块
```
npm install
```
或 (推荐，国内镜像，速度快)
```
cnpm install
```

#### 2）修改config.js，appid秘钥等参数，以及接口地址
#### 3）修改vue.config.js尾部的ip地址为你的ip地址
#### 4）开始开发...


# 2.帮助
## 关于px转rem插件说明
需要安装 lib-flexible 与postcss-plugin-px2rem包，然后再vue.config.js里面启用注释的相关配置即可


## 关于config.js的说明
配置了一些常用的接口地址和地址环境切换，跟换请求地址只需要更换com.mode为对应的即可

## 关于router参数的一些说明
|名称|注释|
|-|-|
|path|页面显示的路径 |
|component|页面真实路径|
|name|页面name（唯一）|
|meta.title|页面标题，会自动加载document标题|
|meta.login|是否验证登录状态|
|meta.keepAlive|页面缓存|
|meta.isKeep|页面缓存控制|
|meta.bg|页面背景，会自动注入到body上|

## 关于工具类
common为工具文件夹，封装了大部分的工具函数，包括指令过滤器等都在里面

## 关于适配
本框架会自动识别是否为小程序 是否为全屏手机，并在body标签上加上相应的类   
小程序：xcx   
全屏：iosXH   
ios手机：ios   
小程序会自动写入一个名为isxcx的缓存，1为小程序0为非小程序   

## 关于指令 
### 目前内置了以下几种 v-xxx就可以了   
|指令|适用标签|注释|
|-|-|-|
|v-focus|input|用于自动获取焦点|
|v-go|all|类似于router-link的to或a标签的href|
|v-seeimg|div,img|图片相册，放到img标签上或者img的父级，会自动检测图片相册 依赖于vant|
|v-rgo|all|不带历史记录的跳转  等同v-go|
|v-tel|all|拨打电话|
|v-iosbugscroll|input|解决ios在微信环境下输入法把输入框顶起来的bug| 

## 关于过滤器
### 目前内置了以下几种
|过滤器|注释|用法|结果|
|-|-|-|-|
|numFilter|格式化number保留2位小数|{{10000 \| numFilter}}|10000.00|
|money|金钱单位的格式化|{{10000 \| money(0)}}|10,000.00|
|time|时间类型格式化|{{'2020-03-18 12:00:59' \| time('yyyy-MM-dd')}}|2020-03-18|
|img|图片地址补全|{{'/xx/xx.png' \| img(100,100)}}|http://xxx/xxx/xx.png|
|hide|隐藏并截断字符串|{{13888888888 \| hide(3,4,'*')}}|138****8888|
具体用法查看函数内部


## 其他
store暂时没有用到   
assets为静态资源的文件夹 样式和图片理应放里面

