Vue全家桶实战 学习心得

Posted aizixue999

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Vue全家桶实战 学习心得相关的知识,希望对你有一定的参考价值。

Vue全家桶实战 从零独立开发企业级电商系统

==学习视频-资料整理. 密码:7zxc==


学习目标1: Node环境安装

讲解Node环境安装和配置,以及Node版本如何做卸载和升级
  1. Node环境安装

  2. Node升降级


学习目标2: Git安装和配置

介绍Git软件的安装和配置,其次对Git命令做详细的操作演示。
  1. Git的安装

  2. Git配置

  3. Git配置SSH公钥

  4. VSCode操作Git

  5. Git常用命令


学习目标3: Vue Cli4.0安装和使用

首次对Vue脚手架4.0版本做安装和演示,并对可视化功能做详细介绍
  1. VueCli4.0安装/使用

  2. Vue-DevTools安装使用


学习目标4: 项目基础架构

前端基本项目架构,通过此章节可搭建一个通用性的前端架构,内容涵盖跨域方案、路由封装、错误拦截等
  1. 跨域-CORS

  2. 跨域-JSONP

  3. 跨域-接口代理

  4. 接口梳理

  5. 目录结构设置

  6. 路由封装 Storage封装

  7. 接口错误拦截


学习目标5: 商城首页

首页各个组件的静态代码实现,并实现了图片懒加载插件集成和Modal动画实现。
  1. Nav-Header组件

     

  2. Nav-Footer组件

     

  3. Service-Bar组件

     

  4. 首页轮播功能实现

     

  5. 首页广告位实现

     

  6. 手机商品实现

     

  7. Modal交互补充

 


学习目标6: 登录页面

登录页面交互和接口完整代码实现
  1. 登录交互实现

     

  2. 拉取用户信息


学习目标7: Vuex集成

Vuex插件的入门和实战应用。
  1. 初步了解Vuex

  2. Vuex框架搭建

  3. Vuex实战应用


学习目标8: 产品站页面

介绍产品站页面吸顶组件、参数组件、视频模块以及Slide动画等实现。
  1. 产品站参数组件实现

  2. 组件吸顶实现

  3. 视频模块实现  

  4. Slide动画实现  

  5. 产品站交互实现  

  6. 商品详情交互实现  


学习目标9: 订单确认页面 订单结算

订单确认页面中部分静态模块实现以及接口功能实现
  1. 订单父组件结构封装

  2. 地址和商品数据加载

  3. 地址删除功能实现  

  4. 新增地址表单静态实现  

  5. 新增地址交互实现  

  6. 地址编辑和订单提交  

    1. 订单详情数据加载

      1. 支付宝支付对接

        1. 微信支付对接

          1. 微信支付状态轮询


学习目标10: 订单列表

介绍了订单列表的数据渲染和分页功能实现
  1. 调整Order父组件结构

  2. 订单列表数据渲染

  3. Loading和NoData优化  

  4. 订单列表分页-分页器  

  5. 订单列表分页-加载更多  

  6. 订单列表分页-滚动加载


学习目标11: 上线部署

代码打包和线上环境部署
  1. 保留分页器

  2. vue.config配置介绍

  3. Loading和NoData优化  

  4. 服务器部署准备工作  

  5. nginx安装和配置  

  6. Node环境搭建

以上是关于Vue全家桶实战 学习心得的主要内容,如果未能解决你的问题,请参考以下文章

前端框架Vue自学之Vuex

NLP学习心得:一人学习,全家受益

前端框架Vue自学之Vue CLI

前端框架Vue自学之Vue基础语法

前端框架Vue自学之axios

前端框架Vue自学之Vue组件化开发