Refactor the mi mall with vue, vue-router, vex, etc.
2018.10.06 有同学反馈基于初始的[email protected]版本,用npm安装依赖报错"api.genCacheConfig is not a function",解决方案:1.用最新版本的vue-cli创建项目;2.直接clone项目用yarn安装依赖。现已把master分支的相应模块升级到3.0.4。
- vue-cli和vue-loader版本说明
- 单vue文件组件:顶级元素、预处理器、CSS作用域
- 安装安插、配置postcss
- 添加兼容性处理:buggyfill
- 样式处理(normalize.css、reset.css、字体图标)
- 路由处理
- MiLogin.vue组件(Vue实例、模板语法、计算属性、Class和Style绑定、条件渲染和事件处理)
- axios、接口管理平台RAP2
- 优化:函数节流、数据加密、scripts-serve
- API封装优化(rap的url和fetch封装)
- Mock数据本地备份
- 生命周期、响应式原理
- MiHome.vue组件(列表渲染、列表过渡)
- swiper、nprogress
- 单页面应用:小米商城、网易云音乐、饿了么、vue-router文档
- 起步指南
- 重定向、焦点状态(active-class)、路由对象($route)、过渡动效、路由元信息、路由懒加载
- 数据结构优化
- 组件通信(props down、全局bus)
- loading状态优化
- 部分交互处理
- 图片懒加载
- 商品列表组件和猜你喜欢组件
- 路由:路由数据获取、导航守卫--beforeRouteEnter、导航守卫--beforEach、动态路由匹配
- HTML文本(v-html、防xss攻击)
- 过渡:JavaScript钩子--after-leave
- 图片轮播(Swiper)
- mixin混入
- 组件:用户评价、为你推荐(重构猜你喜欢)、SKU组件
- 父子组件通信
- 加载状态组件:MiSkeleton.vue
- 用Vuex管理加载状态viewLoading和过渡效果transitionName
- 页面结构、数据结构和API接口分析
- 数据结构修改和渲染
- 购物车操作:选择商品、修改数量、选择服务、删除商品
- MiPop组件:在组件上使用v-model、通过插槽分发内容
- 混入处理:底部组件和标题组件
- 状态管理:用户信息
- 路由处理:登录权限
- 地址操作:列表展示、新增编辑、删除、选择省市区
- MiDialog组件:组件调用、插件调用、函数调用
- API的Service封装
- vuex之Module
- MiDetail组件中地址管理
- 底部导航购物车数量
- css预处理stylus
- 联调配置
- 打包部署
- 订单提交:登录验证、地址操作
- 订单列表:焦点状态、tab切换、不同状态对应的操作
- 订单详情
- 详情页升级改版