项目搭建
scr里创建stroe router utils 文件
安装路由,vant ,vuex,axios 包
router下配置,进行全局注册,配置路由规则,导出,并在main.js中注册
配置axios,和拦截器
配置基准路径,一个开发,一个上线
登陆页面
使用ui组件库写好静态结构 在views/login/index.vue
做好相应的表单验证 账号/密码的正则
封装axios,在src/utils/requerst.js中
获取接口 src/api/user.js
配置路由,在views/router/index
<span style="font-size: inherit;">安装vuex包,创建views/store/modules/index ,定义user模块 ,配置好需要的内柔</span><br>
配置数据持久化
loyout
在mian.js中导入vant组件 Tabbar, TabbarItem
在router/index.js中配置嵌套规则
在loyout/index.vue 中写路由出口 <font color="#e74f4c">一定要写</font>
home页面
使用ui组件库,导入 search,swipe,grid,list的组件,在mian.js全局注册,<br>
创建src/api/home.js ,配置好需要的接口
在home页面中使用钩子发送请求
设置上拉加载,下拉刷新,图片加载失败显示的图
GoodsDetail页面
从首页的list点击跳转到GoodsDetail
页面布局使用组件库vant 有 swipt bar gooda-ation tag<br>
navbar的标题需要调用api
创建api/goods.js进行封装api接口
购物车徽标使用getters先获取数据然后进行判断 最后再页面中调用<br>
Cart页面
首先创建仓库,carts 然后再src/store/index.js注册模块
加入购物车遍历数组
仓库中拿到的数据,进行页面渲染
购物车底部的全选,统计,反选,加减商品