vue开发文档整理

一、技术选型

• 使用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来写只作用于当前vue文件。
• 遇到经常公用的，比如百分比计算，一定要写在全局var.scss里面。
• 公共使用的css要单独放在一个文件夹里

四、 文件名要求

1. 有意义的名词、简短、具有可读性
2. 以小写开头，采用短横线分割命名
3. 公共组件命名以公司名称简拼为命名空间(app-xx.vue)
4. 文件夹命名主要以功能模块代表命名

五、 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