开发规范

CRMEB PC端前端开发规范

开发规范

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

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

命名

页面目录 文件夹命名格式骆驼式命名法,例如：用户列表 userList
例如：商品模块
product 商品
├─ product 商品管理
├─ productList 商品管理目录
├─ index.vue 首页
├─ components 组建
├─ tableFrom.vue
├─ tableList.vue
├─ handle 操作功能页面目录
├─ delete.vue
├─ productCategory 商品分类目录
├─ 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 独立命名，一般不用新建文件夹

模块命名

├─ product 商品管理
├─ user 用户管理
├─ order 系统订单管理
├─ setting 系统设置维护 系统权限管理、系统菜单管理 客服管理
├─ chat 客服管理（列表，添加，删除，编辑）
├─ application 各个应用模块功能管理公众号、小程序、支付宝、百度小程序、今日头条小程序
├─ system 系统更新日志 数据库管理
├─ finance  财务管理
├─ agent 分销管理
├─ marketing 优惠券、积分、拼团、砍价、秒杀
├─ echarts 数据统计分析
├─ notification  消息通知管理、模版消息（列表，通知，添加，编辑）、短信
├─ file 附件文件管理
├─ freight 运费模版管理 物流公司
├─ merchant 商户管理
├─ widget 组件 小插件
└─ cms 文章管理

目录结构

主要目录结构及说明：

├─assets 静态文件存放
│  │  README.md
│  │  
│  ├─css css文件存放
│  │      base.css
│  │      css.css
│  │      index.scss
│  │      reset.css
│  │      
│  ├─iconfont
│  │      
│  ├─images 
│  │      
│  └─theme
│          element-variables.scss
│          
├─components 组件
│      ChatRoom.vue 客服组件
│      countDown.vue 倒计时组件
│      ffVip.vue 激活付费会员弹窗组件
│      footers.vue 底部导航组件
│      headers.vue 头部导航组件
│      hotGoods.vue 热门商品组件
│      Logo.vue 展示log组件
│      README.md
│      
├─layouts 
│      default.vue 默认入口文件
│      error.vue 错误
│      README.md
│      
├─libs
│      socket.js socket连接js
│      
├─middleware
│      README.md
│      
├─mixins
│      appChat.js 客服逻辑js
│      SendVerifyCode.js 验证码发送逻辑js
│                   
├─nuxt-dist 打包后文件存放     
├─pages 页面文件
│  │  alipay.vue 支付宝支付页面
│  │  AppChat.vue 客服页面
│  │  evaluation.vue 商品评价页面
│  │  goods_cate.vue 商品分类页面
│  │  goods_list.vue 商品列表
│  │  goods_presell.vue 预售列表
│  │  goods_presell_detail.vue 预售详情
│  │  goods_search.vue 商品搜索
│  │  goods_seckill.vue 商品秒杀
│  │  goods_seckill_detail.vue 秒杀详情
│  │  index.vue 主页
│  │  login.vue 登录页面
│  │  logistics.vue 物流详情页面
│  │  order_confirm.vue 订单确认页面
│  │  order_detail.vue 订单详情页面
│  │  payment.vue 支付页面
│  │  refund.vue 退款页面
│  │  refund_goods.vue 退款商品页面
│  │  shoppingCart.vue 购物车页面
│  │  user.vue 个人中心页面
│  │  wxPay.vue 微信支付页面
│  │  
│  ├─goods_detail 商品详情
│  │  └─_id
│  │          index.vue
│  │          
│  ├─mobile_login 手机号登录页面
│  │      index.vue
│  │      
│  └─user
│          address_list.vue 用户地址列表
│          balance.vue 我的余额页面
│          collect.vue 收藏页面
│          index.vue 账号管理页面
│          messageCenter.vue 站内信页面
│          myCoupon.vue 我的优惠卷页面
│          orderList.vue 订单列表页面
│          userCoupon.vue 优惠卷领取页面
│          
├─patches
│      @nuxt+generator+2.14.5.patch
│      
├─plugins
│      axios.js 异步请求js
│      debounce.js 
│      element-ui.js element UI
│      main.js 入口js文件
│      utils.js 帮助js
│      vue-clipboard.js 复制文件js
│      vue-swiper.js swiperjs
│      vueqr.js 二维码生成组件
│      
├─static 静态文件
│      favicon.ico
│      README.md
│      
├─store 状态管理
│      index.js
│      README.md
│      
└─utils 表请js
        emoji.js

开发打包项目

# 进入项目目录
$ cd admin

# 安装依赖
$ npm install

# 启动项目(本地开发环境)
$ npm run dev

# 打包项目
$ npm run build

配置请求域名

开发环境配置

配置文件地址：/.env.dev

请求域名配置

$ VUE_APP_API_URL='http://自己的域名/adminapi'

管理端ws

$ VUE_APP_WS_ADMIN_URL = 'ws://自己的域名/ws'

生产环境

接口请求地址 (http)或 (https)://www.crmeb.com(换成你的域名)/adminapi 非独立部署默认为空

$ VUE_APP_API_URL=''

管理端ws

socket 系统连接地址 (ws)或(wss)://www.crmeb.com(换成你的域名)/ws 非独立部署默认为空

$ VUE_APP_WS_ADMIN_URL=''

本页目录