1.0.2 • Published 4 years ago
tdcore.vue v1.0.2
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 install2）修改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为静态资源的文件夹 样式和图片理应放里面