- P1-项目介绍
- P2-环境配置及目录结构
- P3-商品列表页的布局
- P4-商品列表套数据
- P5-商品页组件
- P6-商品加入购物车
- P7-购物车商品删除
- P8-购物车小球效果
- P9-商品详情页数据
- P10-商品详情页交互
- P11-购物清单页
- P12-购物清单的增删多选
- P13-订单确认页商品数据
- P14-收货地址及发票信息
- P15-添加收货信息-上
- P16-添加收货信息-下
- P17-提交订单
- P18-订单详情页
- P19-我的订单页
- P20-课后练习
B站vue做锤子商城教程
P1-项目介绍
- 项目名称:Vue锤子商城
- 架构:脚手架
- 成果:锤子商城加入购物车,下单购买,修改收货地址等
- 开发周期:2019/11/05-2019/11/07
- 收获:学会了安装vue-cli环境,目录结构,Vue指令的基本操作,封组件,分配路由,能简单改成毕设前台页面
P2-环境配置及目录结构
环境配置
- node12.13.0：官网下载
- npm6.12.0(依赖管理)：node装完就有了
- cnpm：npm install cnpm -g
- vue(构建用户界面的渐进式框架)：cnpm install vue
- vue-cli：cnpm install –global vue-cli
- webpack(打包工具)：vue init webpack 项目名
- 运行：cd进到项目文件夹，npm run dev
- 安装依赖：npm install
- vuex(状态)：npm install vuex –save
- vue-router(路由)：npm install vue-router
- eslint(代码检测)：npm install eslint
- npm install material-ui-vue –save(需要和material框架合作时要安装material-ui-vue，这个项目不用)
目录结构
- node_modules：
- build：项目构建(webpack)相关代码
- config：项目开发环境配置
- src：源码目录
- assets：存放样式和图片
- components：存放组件
- lib：放模拟好的数据
- router：存放路由的配置文件
- store：存放vuex的相关文件
- views：存放页面
- App.vue：页面入口文件
- main.js：程序入口文件，加载各种公共组件
- static：静态文件，比如一些图片，json数据等
- index.html：入口页面
- package.json：项目基本信息
- readme.json：项目说明
P3-商品列表页的布局
- 在App.vue写整体页面框架，拆成两个部分：导航+列表，导航部分作为一个公共的组件
- 在components里创建header-nav.vue,把切图index.html的导航部分代码粘到template标签里
- 把切图的header.css样式和reset.css样式粘到assets里的css里
- 把组件内容引入到页面中：在router里的index.js导入样式reset.css和header.css，把原来自带的引入Hello和Hello的路径删掉
- 在App.vue中引入header-nav页面
- 在App.vue中建立组件headerNav
- 把切图里的图片粘贴到assets里的img内
- 在views里新建一个页面shop.vue，把index.html商品列表部分代码粘到template标签内
- 把切图的goodsList.css粘贴到shop.vue的style标签内，多余的代码删掉（复制到css里引入也行）
- 在router的index.js中引用shop.vue
- 在router的index.js中添加shop路径
P4-商品列表套数据
- 在lib里新建一个newGoodsData.js存放模拟商品数据
- 在lib里的newGoodsData.js的最后把数据暴露出去，让数据能在页面中拿到
- 在views里的shop.vue里套数据，只留一块item，其他的都删掉
- 在script标签里引入newGoodsData
- 给这些数据一个挂载点能拿到数据
- 给item那一小块加个v-for循环
- 报错复制链接查怎么改，去“Eslint规则说明”博客里去找原因，调整newGoodsData.js文件，重新运行(引号报错:vue中都是双引号,页面中都是单引号,统一一下格式都换成一样的单引号)
- 把数据改成{ {item.name} }的形式，属性里的内容要加冒号
- v-for循环颜色
P5-商品页组件
- (把一块item封装成组件，通过父级的数据循环一个个的组件)在views里的shop.vue建立一个自定义的标签shop-item来代替我们要修改的内容,v-for循环它
- 在components里新建一个组件shop-item.vue,把shop.vue里的shop-item里的内容剪切到shop-item.vue里的template里来
- 在shop.vue里定义一个组件shopItem
- 把shop-item.vue引入到shop.vue里来
- 报错，这里要用到一个组件之间的信息传递，把父级shop.vue中的数据传递到子级shop-item.vue中去：在shop.vue中加个
:item="item"，在shop-item.vue中的script中使用props接收item,item的值的类型是一个对象 - (选择颜色，从对象中拿到所对应的的当前颜色的第几个),定义一个值，给它初始值为0，把上面循环的0改成itemIndex
- 在shop-item.vue的script里写一个方法当我们点击的时候把他的index传过来，在循环的时候加一个click事件
- 在shop-item.vue里的加一个a标签的选中状态
P6-商品加入购物车
- (把加入购物车的弹出框做成一个组件，它是两个组件中的通讯，并且购物车里面的数据会带到其他的页面当中，所以这里就要用到状态管理工具vuex)在store里新建一个index.js
- 在store里的index.js里引入vue和vuex，让vue去使用vuex
- 创建一个store，实例化对象，并把它暴露出去
- 到main.js中去引入store
- 在store里的index.js里创建一个数组来存放加入购物车的数据
- 添加购物车方法
- 在shop-item.vue里调用加入购物车方法
- 在components里新建car-panel.vue，把购物车封装成一个组件car-panel，在header-nav.vue中使用car-panel标签
- 把header-nav.vue中car-panel标签里的内容剪切到car-panel.vue中的template中
- 在header-nav.vue的script中引入car-panel
- 在car-pannel.vue中的script里的computed的新建carGoodsData方法，遍历它(图片要加一个属性去控制它的大小)
- 在store里的index.js里定义一个方法totleCount计算购物车数量大小，totlePrice计算购物车总价
- 在car-pannel.vue中使用count方法拿到数量，totle方法拿到总价
- 在页面中判断是否显示加入购物车弹窗v-if，根据数量改变颜色
P7-购物车商品删除
- 在store里的index.js里创建删除购物车方法
- 在car-pannel.vue中调用
- 加入最大值的限制：在components里新建一个prompt.vue，把弹窗的代码粘贴进来
- 在shop.vue页面引用prompt.vue
- 在store里的index.js里创建一个判断是否为最大值弹窗隐藏的初值，创建一个函数判断是否为最大值
- 在store里的index.js里关闭最大值弹窗的方法
- 在prompt.vue文件创建点击事件，执行关闭弹窗的方法
- 创建鼠标移入弹窗显示，移出隐藏方法：car-panel.vue
- 在store中的index.js中执行显示和隐藏方法
- 在car-panel.vue中调用显示隐藏方法
- 在在store中的index.js中加入商品时显示
P8-购物车小球效果
- 在car-panel.vue和index.js里写小球
- 贝塞尔曲线
P9-商品详情页数据
- 在views里新建item.vue，页面代码样式粘过来(如果样式直接放在页面里需要改图片路径)
- 在router里的index.js配置路由
- 改shop-item.vue里的跳转路径，传递参数
- 在item.vue里拿到传过来的数据
- 在lib里新建newItemsData.js模拟数据
- 在item.vue里引入newItemsData.js
- 在item.vue里对比shop-item.vue传过来的数据和newItemsData.js中的数据，循环遍历获取item详情
- 在item.vue里套数据，换成双大括号的形式
P10-商品详情页交互
- (左侧的图片切换)在item.vue中改变imgIndex
- 在item.vue中切换颜色，如果想左边的图片也跟着切换就要用watch监控传过来的itemid，如果颜色改变了就重新赋值