vue2——电商项目 黑马

创建项目

vue2——电商项目 黑马_第1张图片

 vue2——电商项目 黑马_第2张图片

初始化

router

vue2——电商项目 黑马_第3张图片

 app.vue

vue2——电商项目 黑马_第4张图片

vant 组件库

vue2——电商项目 黑马_第5张图片

 vue2——电商项目 黑马_第6张图片

 Viewport 布局 vw适配

vue2——电商项目 黑马_第7张图片

vue2——电商项目 黑马_第8张图片

 路由配置

vue2——电商项目 黑马_第9张图片

 

 底部导航组件

 vue2——电商项目 黑马_第10张图片

二级路由配置 

vue2——电商项目 黑马_第11张图片

 vue2——电商项目 黑马_第12张图片

 vue2——电商项目 黑马_第13张图片

登录页面

vue2——电商项目 黑马_第14张图片

 新建默认样式vue2——电商项目 黑马_第15张图片

 main.js 引入commonlessvue2——电商项目 黑马_第16张图片

 登录静态页面—头部组件NavBar

vue2——电商项目 黑马_第17张图片

 导入navbarvue2——电商项目 黑马_第18张图片

引用

vue2——电商项目 黑马_第19张图片

 axios封装

 vue2——电商项目 黑马_第20张图片

 vue2——电商项目 黑马_第21张图片

vue2——电商项目 黑马_第22张图片 vue2——电商项目 黑马_第23张图片

 图形验证码

vue2——电商项目 黑马_第24张图片

获取

vue2——电商项目 黑马_第25张图片

 getvue2——电商项目 黑马_第26张图片

 渲染

vue2——电商项目 黑马_第27张图片

 api接口模块

vue2——电商项目 黑马_第28张图片

vue2——电商项目 黑马_第29张图片

 vue2——电商项目 黑马_第30张图片

 toast轻提示

 vue2——电商项目 黑马_第31张图片

vue2——电商项目 黑马_第32张图片

 vue2——电商项目 黑马_第33张图片

使用

vue2——电商项目 黑马_第34张图片

 获取验证码定时器

vue2——电商项目 黑马_第35张图片

 vue2——电商项目 黑马_第36张图片

vue2——电商项目 黑马_第37张图片

 vue2——电商项目 黑马_第38张图片

vue2——电商项目 黑马_第39张图片

 验证码请求处理

vue2——电商项目 黑马_第40张图片

vue2——电商项目 黑马_第41张图片

添加数据

vue2——电商项目 黑马_第42张图片

双向绑定

vue2——电商项目 黑马_第43张图片 封装接口

vue2——电商项目 黑马_第44张图片

你可能感兴趣的:(前端)