Vue项目开发流程

Vue项目开发流程

一、 互联网软件开发流程

1. 需要分析

  1. 市场、运营、客户提出要求和需求
    • 因为 xxx 我要做 xxx
    • 举例: 我是做螺蛳粉商家,我想做一个点餐系统
  2. 产品经理提炼业务需求,然后整理为 提案 【 文档 】
  3. 产品经理组织完成需求评审 【 最多3次 】

2. 设计研发

  1. UI设计评

    • ui设计人员演示根据产品原型图,设计出来的设计稿

    • 产品原型图
      在这里插入图片描述

    • 根据原型图,设计师设计出设计稿

      • 设计稿要做出完整的一套登录流程
  2. 概要设计

    • 大概的规划整个项目
      • 哪些页面
      • 哪些功能
      • 设计修改
      • 如何开发
  3. 开发工程师进行项目研发

    • 前端
      • 开会,内部讨论,项目情况
        • 那个框架
        • 那个组件库
        • 对应的功能能不能实现
        • 任务分配
          • 成员一: 做什么功能 、 什么时间内完成
            • 建议: 平时就加班做,回家下了班还做【 写相似功能 】
            • 多做准备准没错
        • 总监: 会给大家做项目托管
          • github
          • 码云
          • 。。。
        • 确定项目版本控制管理工作
          • git
          • svn
            • svn 使用方式 git 一致
            • Svn后端联动 【 找后端帮忙 】
        • 成员使用git把总监做好的东西,克隆下来,然后使用git团队操作手段进行项目开发
        • 项目完成
  4. 单元测试

    代码质量检测

    语法检测

    • test
    • mocha
    • jest
    • linter
      • jslint
      • eslint

3. 测试阶段

1. 软件测试【 局域网 】

2. 内测 【 beta版 】

  • 放开部分用户权限,然后使用项目,让专业的人员进行测试

4. 上线

  • 购买云服务器 / 主机

  • 域名购买,域名的解析 【 不用 】

    • 域名备案
      • 托管备案:在哪里买,谁帮我做一次备案
        • 本地户口: 一周 - 2周
        • 外地户口: 20天以上
      • 本地派出所备案
        • 过程比较艰难
  • 使用ip地址也可以

  • 企业级项目要经过审核

    • xxx
  • 正式上线

    • 前后端:

      • 项目样式和动效、操作逻辑是否有bug

      • 用户注册量

      • 用户使用量

      • 平台注册量

      • 平台运营量

      • xxx

    • 通过数据来决定项目质量、业绩

二、人员配置

公司规模

​ 20 - 55

​ 99 - 200

​ 500 - 1000

1.技术研发部门的配置

  • 大企业
    • 技术部们分项目组
    • 项目组的配置
      • 1 个产品
      • 2 - 3 设计, 一般是2个
      • 3 - 4 前端
      • 5 - 10 后端 【 总监 】
  • 中小企业
    • 技术部门
      • 1个产品
      • 2 - 4 个设计 , 一般是2个,有时候都有可能没有
      • 2 - 4 个前端 , 一般是2个
      • 5 - 10 个后端, 一般是3 - 5 个 【 总监 】

三、前端研发

1. 前端研发 - git 操作

  1. 什么是git

    • git是一个分布式版本控制管理工具

      • 版本控制管理工具

        • git
          • 命令行使用
          • 可视化工具使用
        • svn
      • 分布式:分布式计算是计算机科学中一个研究方向,它研究如何把一个需要非常巨大的计算能力才能解决的问题分成许多小的部分,然后把这些部分分配给许多计算机进行处理,最后把这些计算结果综合起来得到最终的结果

        [外链图片转存失败(img-VGLg1Fu0-1567470636876)(F:\三阶段下午+上午\2-Vue.js\3-vue项目以及高级项目开发\3-vue项目以及高级项目开发\vue项目开发流程笔记\img\git分布式理解.png)]

      • 版本

        • git可以存储多个项目版本,为了将来的版本切换

          • 1.0
          • 2.0
          • 3.0
          • 4.0

          [外链图片转存失败(img-MehGgxut-1567470636877)(F:\三阶段下午+上午\2-Vue.js\3-vue项目以及高级项目开发\3-vue项目以及高级项目开发\vue项目开发流程笔记\img\git版本理解.png)]

  2. git的安装

    • 安装的gitbash.exe
  3. git概念

    • 本地git仓库

    • 远程git仓库
      在这里插入图片描述
      在这里插入图片描述

  4. git 基础

    • git初始化 -》 在我们的工程(项目中)创建一个git仓库,这个仓库用一个.git的文件夹表示的
      $ git init
    • 将本地文件提交到暂存区
      $ git add. 将工程(项目)中所有的都存放到暂存区
      $ git add ./index.js 将工程(项目)中指定的放在暂存区
    • 将在暂存区的文件提交的仓库存储区
      $ git commit -m ' 对当前提交的文件说明 '
    • 查看提交日志
      $ git log
    • 查看简洁版提交日志
      $ git log --oneline
    • 版本回退
      $ git reset -- hard HEAD 当前的版本
      $ git reset --hard HEAD^ 上一个版本
      $ git reset --hard HEAD^^ 上上一个版本
      $ git reset --hard HEAD~100 往上100个版本
    • 进行文件修改的撤销
      $ git checkout -- 文件路径
  5. git 分支管理

    • git分支创建
      $ git branch 分支名
    • git分支的切换
      $ git checkout 分支名
    • 发现在分支中也可以看到主分支的提交记录
    • 连接远程
      $ git push 远程仓库地址 分支名称
    • 注意: 如果两个人同时操作了一个文件,这个时候就会有冲突,我们应该怎么办?
    • 解决: 先git pull , 然后在手动处理,然后在去提交
    • 为了解决每次都要书写远程url,我们可以给远程url写一个别名
      $ git remote add -m 别名 url
      $ git push origin 分支名称
    • 分支合并
      $ git merge 分支名称
git 总结:
  1. git流程

    • 工作区 -> 本地仓库 -> 远程仓库
  2. 分支

    • 先创建本地分支 -> 切换本地分支 -> 工作区操作 -> 远程分支
  3. 主管改了主分支东西,你要重新更新

  4. 分支的合并

  5. git 冲突解决

    • 两个或是两个以上的成员修改同一个文件造成

    • 先git pull 然后 手动选择 然后上传

  6. git 版本回退

  7. 上传式不能是空目录

  8. 分支就是用来存储项目的单一功能,而每一个成员可以控制一个或是多个分支,建议功能要分支化

  9. 分支是子分支合并主分支或是dev分支