hqshadmin

CRMEB多商户

开发规范

统一使用ES6 语法 方法注释 /*

• th => 表头
• data => 数据
• fileName => 文件名
• fileType => 文件类型
• sheetName => sheet页名 */ export default function toExcel ({ th, data, fileName, fileType, sheetName }) 行注释 //

命名

页面目录 文件夹命名格式骆驼式命名法,例如：用户列表 userList 例如：商品模块 product 商品

├─ product 商品管理
    ├─productList 商品管理目录
        ├- index.vue  首页

页面命名、组建、文件夹 命名格式小驼峰命名法,例如：用户列表 userList

类名函数命名 大驼峰式 例如：addUser 变量命名 小驼峰式 例如：user 或者 userInfo _userinfo user-info 常量 采用全大些下划线命名 例如：VUE_APP_API_URl

文件管理规范

pages 页面模块必须件文件夹区分 api 接口一个模块一个文件 组建 一个组建一个文件夹 plugins 插件一个插件一个文件夹 vuex 路由状态管理，一个模块在modules 中建一个文件夹 router 一个模块一个模块在modules 中建一个文件夹 style 样式尽量采用iView自带组建，common.less 系统通用样式不要轻易动 自定义通用样式 style.less,每次添加必须加注释，页面独立样式在在页面内写，后缀less 格式 组建样式 styles 中添加文件夹 composents 对应components 目录新建样式文件 utils 自定义工具js 独立命名，一般不用新建文件夹

模块命名

├─ login 登录
├─ dashboard 首页
├─ product 商品管理
├─ order 系统订单管理
├─ accounts 财务管理
├─ charts 统计图
├─ marketing 营销优惠券 
├─ system 系统更新日志 数据库管理 素材管理 运费模板 客服管理 组合数据
├─ setting 系统身份管理 管理员管理、操作日志
├─ systemForm 商城设置
├─ error-page 错误页

目录结构

主要目录结构及说明：

├── public                      # 静态资源
│   ├── favicon.ico            # favicon图标
│   └── index.html             # html 模板
├── src                       # 源代码
│   ├── api                   # 所有接口api
│   │    └──request.js        # 请求封装
│   │    └──accounts.js       # 有关财务的接口
│   │    └──dashboard.js      # 有关首页的接口
│   │    └──freight.js        # 有关运费模板的接口
│   │    └──marketing.js      # 有关优惠券的接口
│   │    └──order.js          # 有关订单的接口
│   │    └──product.js        # 有关商品的接口
│   │    └──settingMer.js        # 有关权限管理的接口
│   │    └──system.js         # 有关系统配置的接口
│   │    └──systemForm.js     # 有关表单组件的接口
│   │    └──user.js           # 有关登录、用户的接口
│   ├── assets                # 图片、svg 等静态资源
│   ├── icons                 # svg 等静态资源
│   ├── components            # 公共组件
│   │    └──attrFrom          # 商品规格
│   │    └──Breadcrumb        # 头部标题标签
│   │    └──cards             # 统计
│   │    └──couponList        # 优惠劵列表
│   │    └──goodsList         # 商品列表
│   │    └──Hamburger         # 导航收缩组件
│   │    └──HeaderSearch      # 导航搜索组件
│   │    └──iconFrom          # 导航添加图标
│   │    └──RightPanel        # 右侧设置按钮，设置导航相关
│   │    └──Screenfull        # 全屏
│   │    └──SvgIcon           # svg图标
│   │    └──ThemePicker       # 右侧设置按钮，设置组题颜色
│   │    └──templatesFrom     # 运费模板
│   │    └──ueditorFrom       # 富文本编辑器
│   │    └──uploadPicture     # 上传图片组件
│   │    └──UploadExcel       # 下载Excel
│   │    └──userList          # 用户列表
│   ├── layouts               # 导航布局
│   │    ├──index             # 主页面
│   │    ├──components        # 导航组件
│   │        └──Settings      # 右边小按钮，设置导航等
│   │        └──Sidebar       # 侧边导航
│   │        └──TagsView      # tab标签页导航
│   │        └──Navbar        # 头部导航
│   │        └──AppMain       # 导航路由
│   │        └──index.js      # 组件引用
│   │    └──mixins            # 自适应大小
│   ├── libs                  # 公共js方法
│   │    └──settingMer        # 配置请求地址
│   ├── views                 # 所有页面
│   │    └──login                    # 登录
│   │         └──index               # 登录
│   │    └──dashboard                # 首页
│   │    └──product                  # 商品
│   │         └──addProduct          # 添加商品
│   │         └──productAttr         # 商品规格
│   │         └──productClassify     # 商品分类
│   │         └──productList         # 商品列表
│   │         └──Reviews             # 商品评论
│   │    └──order                    # 订单管理
│   │         └──index               # 订单列表
│   │         └──orderDetail         # 订单详情
│   │         └──logistics           # 物流单号
│   │         └──orderRefund         # 退款单
│   │    └──accounts                 # 财务
│   │         └──reconciliation      # 财务对账
│   │              └──index          # 财务对账
│   │              └──record         # 对账订单
│   │    └──charts                   # 统计图
│   │    └──marketing                # 营销
│   │         └──coupon              # 优惠劵
│   │              └──index          # 路由
│   │              └──couponList     # 优惠券列表
│   │              └──couponList     # 会员领取记录
│   │    └──system                   # 设置
│   │         └──config              # 素材管理
│   │         └──freight             # 运费模板
│   │         └──service             # 客服管理
│   │         └──groupData           # 组合设置
│   │              └──list           # 组合数据
│   │              └──data           # 组合数据列表
│   │    └──setting                  # 设置-权限管理
│   │         └──systemRole          # 身份管理
│   │         └──systemAdmin         # 管理员管理
│   │         └──systemLog           # 操作日志
│   │    └──systemForm               # 设置-商城设置
│   │         └──index               # 店铺配置
│   │         └──modifyStoreInfo     # 基础配置
│   │    └──error-page               # 错误页
│   │         └──404                 # 错误页404
│   │         └──403                 # 错误页403
│   ├── filters                      # 过滤器
│   ├── router                       # 路由配置
│   │    └──modules                  # 页面路由模块
│   │         └──accounts.js         # 有关财务
│   │         └──charts.js           # 有关首页统计图
│   │         └──config.js           # 有关系统配置
│   │         └──marketing.js        # 有关优惠券
│   │         └──group.js            # 有关组合数据
│   │         └──order.js            # 有关订单
│   │         └──product.js          # 有关商品
│   │         └──settingMer.js          # 有关权限
│   │         └──systemForm.js       # 有关商城设置
│   │    └──index.js                 # 路由的汇总
│   ├── store                        # Vuex 状态管理
│   ├── utils                        # 全局公用方法
│   ├── styles                       # 样式管理
│   ├── permission.js                # 路由拦截
│   ├── settingMer.js                   # 业务配置文件
│   ├── main.js                      # 入口文件 加载组件 初始化等
│   └── App.vue                      # 入口页面
├── tests                      # 测试
├── .env.xxx                   # 环境变量配置
├── .eslintrc.js               # eslint 配置项
├── .babelrc                   # babel-loader 配置
├── .travis.yml                # 自动化CI配置
├── vue.config.js              # vue-cli 配置
├── postcss.config.js          # postcss 配置
└── package.json               # package.json

开发打包项目

~~~

进入项目目录

$ cd admin-iView

安装依赖

$ npm install

启动项目(本地开发环境)

$ npm run dev

打包项目

Build

# build for test environment
npm run build:stage

# build for production environment
npm run build:prod

Advanced

# preview the release environment effect
npm run preview

# preview the release environment effect + static resource analysis
npm run preview -- --report

# code format check
npm run lint

# code format check and auto fix
npm run lint -- --fix