健康管理平台 3.0

打包文件已移除 git 仓库

src

1. 页面文件 pages 按模块分类放在 pages 下
2. 组件

• 业务组件，一般是与本项目有关的 Ui 组件 按模块分类放在 components 下 例如，订单 item 放在订单相关模块下 order/OrderItem
• 基础通用组件，可适用于大多数项目 放在 base 下 例如，星星组件,loading
• 优先使用vant中提供的组件，如 toast、二次确认弹窗等，与设计稿样式不一致或比较违和的在style/vant.less中写样式覆盖

3. 命名规范

• vue 文件：组件使用大驼峰，页面使用连字符
• 路由 name: 连字符，路由 path: 连字符

8. style

• variable.less 已全局引入
• index.less 已全局引入
• mixin.less 定义常用 less 样式类方法，如箭头标识
• base.less 通用样式
• vant.less 重新定义的 vant-ui 样式(一般在 vue.config.js 定义，定义不了的才在这里重写)

9. config

• global.js 全局变量,尽量少用，一般只定义 baseurl
• env.js 区分环境
• 定义与后台约定好的常量

10. icons

• svg 存放 svg 图标
• 使用:

api 请求

1. api/index.js 中导出所有api
2. 在api/http.js对 axios 作了一层封装
3. 接口模块化管理，命名统一使用后台提供的接口路径，如套餐模块的接口在 api/package, 收藏接口在 api/collect
4. api/index.js 中导出所有api,并且挂载在 vue.prototype.$api 上，在 vue 中不需要再引入，可以直接调用this.$api.collect.add()
5. 后端突然换接口风格。。原来的写法 hold 不住了 3 4 5 层的接口 ，文件名、变量名和 url 路径第一级同名，接口调用的方法名和接口用法对应即可，不需要同名

2. 二级标题栏 titleBar

1. 二级标题栏 ，需要显示的页面在路由 meta 里配置

  titleBar: {
    title: '', // 可不设置，默认取meta.title
    hasMenu: true, // 是否显示右侧菜单入口
    menu: [ // 右侧菜单配置
      {
        icon: 'home_icon_search',
        text: '我的',
        link: '/mine'
      }
    ]
  }

## 二、utils


### 3.codefun 生成的页面，设计稿是375，px尺寸需要乘2，可以在chrome console通过执行以下函数转换下

function doublePxWithDesign(str = '') { return str.replace(/([0-9]{1,}.?[0-9]*)px/g, function(match,p1){ return p1 * 2 + 'px' }) } console.log(doublePxWithDesign(``))

## 注意

1. 已采用 px 转换插件. 编写样式以设计图上的标记 px 写即可. 对于不需要转换的. px 写成大写 PX
2. 全局已开启 eslint , 注意控制台语法规范报错 , 同时 npm run build 前,应该 npm run lint 检验一遍