1、为什么要使用vue

1、项目组（4个人）只有一个人会用react，其余人不会
2、客户要求必须使用vue
3、leader说使用vue

2、使用vue开发项目的流程

全家桶：vue + vue-router + element-ui/iview/mint-ui/vant + axios/fetch + vuex + mock

2.1 软件开发的生命周期 --- 《软件工程》

(1)问题定义
 确定系统的目标、规模和基本任务。
(2)可行性研究
 从经济、技术、法律等方面分析确定系统是否值得开发，及时建议停止项目开发，避免人力、物力、时间的浪费。
(3)需求分析
 确定软件系统应具备的具体功能。通常用数据流图、数据字典和简明算法描述来表示系统的逻辑模型，以防止产生系统设计与用户实际需求不相符的后果。
(4)概要设计 ---- 为什么要使用vue
 确定系统设计方案、软件的体系结构、软件的模块结构。
(5)详细设计
描述如何具体地实现系统。
(6)软件实现阶段
进行程序设计(编码)和模块测试。
(7)综合测试阶段
 通过各种类型的测试，查出软件设计中的错误并改正错误，确保软件的质量;还要在用户的参与下进行验收，才可交付使用。
(8)软件维护
 软件运行期间，通过各种必要的维护改正错误、或修改扩充功能，使软件适应环境变化，以便延长软件的使用寿命和提高软件的效益。每次维护的要求及修改步骤都应详细、准确地己录下来，并作为文档加以保存。

2.2 如何使用vue开发

2.2.1 安装vue脚手架

@vue/cli

cnpm i @vue/cli -g
vue create myapp
vue ui
如何使用3的脚手架兼容2的脚手架
cnpm i @vue/cli-init -g
vue init webpack myapp

vue-cli

cnpm i vue-cli -g
vue init webpack myapp

2.2.2 以3为例

vue create myapp
cd myapp
cnpm run serve

2.2.3 添加dev指令

package.json文件中scripts中添加dev为 npm run serve

2.2.4 依据需求修改 App.vue

• 拷贝lib文件的scss库到 src文件夹下,并且完成App.vue的布局
• 创建必须的页面
  views/home/index.vue
  views/kind/index.vue
  views/cart/index.vue
  views/user/index.vue

• 创建公共页面的底部组件 src/components/Footer.vue

• 配置路由，修改src/router.js 包含命名路由与命名视图 -- 路由的懒加载 -- 路由的重定向
  

• 修改App.vue，使用命名视图
  

2.2.5 构建首页

• 轮播图、产品列表、返回顶部、下拉刷新、上拉加载 ---- ui库
• 数据的请求
• 项目开发初期 --- mock技术

1、安装匹配的UI库
PC： element-ui、iview
移动端： mint-ui、vant

cnpm i mint-ui vant -S
cnpm i vant mint-ui element-ui iview -S

2、轮播图采用vant库

cnpm i babel-plugin-import -D

babel.config.js处添加如下代码配置 ---- 按需加载

3、上拉加载，下拉刷新使用 mint-ui库

cnpm install babel-plugin-component -D

4、数据请求 -- axios / fetch

cnpm i axios -S

5、生命周期的钩子函数

created() mounted() --- 数据的请求

6、home/index.vue引入轮播图组件以及代码结构

7、请求并且填充轮播图数据

请求数据

渲染数据

8、请求列表并且填充数据

使用状态管理器
src/views/home/store.js

src/store.js添加 首页的列表的数据 --- 给状态管理器添加一个模块

home/index.vue中 使用状态管理器
---- mapState mapActions
获取到状态管理器中的值

触发数据的请求

渲染列表的数据

9、实现列表的上拉加载功能 --- vant 中 list列表
引入相关的模块

构建页面基本的布局
loading ---- 页面数据加载时是否显示加载中
finished --- 页面没有数据了
onLoad --- 加载下一页方法

页面初始化数据

状态管理器中实现action -- 请求响应页面的数据

home/index.vue 触发 上拉加载函数

10、下拉刷新的实现 --- vant --- PullRefresh
引入相关的组件

构建页面的基本结构

设定初始值

状态管理器中实现action -- 请求响应页面的数据

home/index.vue中触发action

11、列表跳转进入详情

views/detail/index.vue

配置路由

声明式跳转

编程式跳转

12、详情页面渲染数据

模仿京东滚动页面切换头部

模仿京东滚动页面头部相应的切换

3、购物车页面

导航守卫控制进入该页面

假设购物车的数据如下 --- 可以当做是数据请求来的

如果需要更新数量

导航守卫判断该不该进入
请求购物车页面的数据
给数据添加一个字段flag
渲染数据添加checkbox
checkbox添加v-model为flag
计算属性计算总价与总数量