一、技术选型
- 使用vue-cli基于webpack结合的
- 核心使用 vue、vue-router
- 使用vuex做全局数据的状态管理
- better-scroll 滚动回弹
- mock 模拟数据
- axios/fetch 进行网络请求
二、项目目录结构
├── index.html 入口页面
├── build 构建脚本目录
│ ├──build.js 生产环境构建（编译打包）脚本
│ ├──check-versions.js 版本验证工具
│ ├──utils.js 主要用来处理css类文件的loader
│ ├──vue-loader.conf.js 处理vue中的样式
│ ├── webpack.base.conf.js webpack基础配置
│ ├── webpack.dev.conf.js webpack开发环境配置
│ └── webpack.prod.conf.js webpack生产环境配置
├── config 项目配置
│ ├── dev.env.js 开发环境变量
│ ├── index.js 项目配置文件
│ ├── prod.env.js 生产环境变量
│ └── test.env.js 测试环境变量
├── dist 打包好的项目
├── node_modules 项目依赖模块
├── src 项目源码目录
│ ├── main.js 入口js文件
│ ├── app.vue 根组件
│ ├── components 公共组件目录
│ ├── assets 资源目录，资源会被wabpack构建
│ │ └── css 第三方css文件，全局css文件
│ │ └── font 字体
│ │ └── scss 全局scss
│ │ └── images 图片
│ │ └── logo.png
│ ├── routes 前端路由
│ │ └── index.js
│ ├── pages 前端页面文件
│ │ └── index.vue
│ ├── vuex 应用级数据（state）
│ │ └── store.js 分组数据存贮
│ ├── service 公共服务文件
│ │ └── service.js 处理公共请求，响应数据
│ │ └── util.js 处理公共js操作方法
├── static 纯静态资源，不会被wabpack构建。
系统功能模块
- Loading
- 菜单管理
- 店铺、商品详情
- 购物车弹窗效果
- 附近的店
- 确认订单
- 选择、新增收货地址
- 付款
- 全部订单、已退款、完成、确认详情
- 登录
三、Css要求 - css用scss写，.vue以局部css来写<style lang="scss" scoped></style>只作用于当前vue文件。
- 遇到经常公用的，比如百分比计算，一定要写在全局var.scss里面。
- 公共使用的css要单独放在一个文件夹里
四、 文件名要求
- 有意义的名词、简短、具有可读性
- 以小写开头，采用短横线分割命名
- 公共组件命名以公司名称简拼为命名空间(app-xx.vue)
- 文件夹命名主要以功能模块代表命名
五、 js
- 将公共的js逻辑写在单独文件中。
- 在数据请求前需要显示loading层，请求到数据后，再隐藏loading层。
- 弹框、select等需要大量代码去实现，要以组件的方式引入。
- 使用严格的条件判断符。用===代替==，用!==代替!=
六、Gitflow工作流
每个新功能位于一个自己的分支,使用develop分支作为父分支。当新功能完成时，合并回develop分支。新功能提交应该从不直接与master分支交互
Gitflow用预设两个主分支在仓库中:
master分支: 存储了正式发布的历史
包括产品代码。不能直接工作在这个 master 分支上，而是在其他指定的，独立的特性分支中不直接提交改动到 master 分支
develop分支: 作为功能的集成分支
进行任何新的开发的基础分支。当你开始一个新的功能分支时，它将是开发的基础该分支也汇集所有已经完成的功能，并等待被整合到 master 分支中
hotfix
对产品代码进行修复，这个 hotfix 分支是基于 “master” 分支
项目运行
# 安装依赖
npm install 或 yarn(推荐)
# 开启本地服务器localhost:8088
npm run dev
# 发布环境
npm run build
