新版运营平台结构说明和开发流程

工作

文件夹结构说明

\kkpromo_new\

• promo\

  • dist\ 编译产生的js文件和图片
    
    • app.build.js 正式环境运行文件
    • vendor.build.js 正式环境运行文件（一般不会变动，分离出部分公用库）
    • activity.build.js/config.build.js/bill.build.js... 测试环境运行文件
  • lib\ 手动引入的js文件，需要依赖于jquery的插件都放置于jquery\下
  • route.js 应用于测试环境多个js切换功能
  • src\ 生产环境
    
    • css\ 公用css文件
    • image\ 所有引用图片
    • components\ 所有模块
      
      • public\ 公共组件（头部、尾部、子导航、拟态组件等）
      • index\ 首页组件
      • activity\ 运营活动模块组件
      • config\ 应用配置模块组件
      • bill\ 话费服务模块组件
      • wechat\ 微信模块组件
      • user\ 用户中心模块组件
    • app.vue 入口组件，所有页面组件的入口组件（包含测试和正式）
    • app.js 正式环境的路由配置
    • activity.js/config.js/bill.js... 测试环境的路由配置（每次加一个页面模块需要加2个地方的路由）
    • utils.js 小型工具库
    • store.js 小型静态存储（目前只用于appType的静态存储）

• build\

  • webpack.dev.config.js 测试环境编译配置文件
  • webpack.prod.config.js 正式环境编译配置文件

• enter.html 正式环境入口（后端的index.php，拉取enter.html文件）

• enter_test.html 测试环境入口
• package.json 所有的安装信息&执行的命令

模块开发流程

1. 开发之前确认安装node、npm（一般安装node会附带安装npm）、cmder（或其他好用的控制台仿真器）
2. 打开cmder，改变当前路径到路径kkpromo_new下： e.g. cd E:\www\kkpromo_new
3. 执行 npm install 安装package.json中所有的插件，需要等待15-25分钟不等
4. 安装完成之后有如下命令备选：一般需要在测试环境编译成功并测试完成才建议将正式的文件传到内网以及发布到外网。
   
   • dev 编译测试环境文件
   • dev-w 编译并监听测试环境文件
   • prod 编译正式环境文件
   • prod-w 编译并监听正式环境文件

注意：

每次开发之前需要update或从内网down最新的内容下来之后修改、编译，防止覆盖别人的修改成果。
涉及到新增模块调整路由及菜单地址模块：public\subnav.vue子菜单路径、src\app.js router map路径、src.主菜单路径。

前端开发约定：

基础约定

1. 类名统一用中划线分隔
2. id名、函数名、参数名统一用小驼峰
3. 所有命名必须有意义，如函数名建议动词+名词

项目约定

1. 能够模板（template）解决的数据逻辑问题都建议在模板中解决
2. 页面组件的.content类需要加上标识每一页的类，命名如：cont-模块名-文件名；书写单页组件样式的时候写在所有选择器之前，防止样式冲突
3. 涉及input的部分用public\input.vue组件书写
4. 涉及select的部分用public\select.vue组件书写