实战Vue：基于Vue的移动端购物商城

于 2024-06-20 13:52:53 发布
阅读量794 收藏 20
点赞数 9
分类专栏： 资料作者\/ 是vip1024c 文章标签： vue.js javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/2401_84419493/article/details/139830691
版权

import Swiper2, {Navigation, Pagination, Autoplay} from ‘swiper’;

Swiper2.use([Navigation, Pagination, Autoplay]);

在这里插入图片描述

  1. 如果想在组件中使用或者控制轮播图，可以在监听computer中对swiper进行监听，并在组件的其他地方使用。

在这里插入图片描述

  1. 将首页的数据传输到轮播图组件中，并进行渲染

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

（4）中部导航nav

  1. 在home子文件夹components内新建子文件夹nav，并在nav文件夹中新建Nav.vue

在这里插入图片描述

  1. 将静态界面放在Nav.vue中，并在Home.vue中引入

在这里插入图片描述

在这里插入图片描述

  1. 将Home.vue中请求到的数据通过props传递到Nav.vue，并进行遍历展示

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

（5）限时抢购

  1. 在home子文件夹components内新建子文件夹flashSale，并在flashSale文件夹中新建FlashSale.vue和FlashSaleItem.vue

在这里插入图片描述

  1. 将静态界面放在FlashSale.vue和FlashSaleItem.vue中，并在FlashSale中引入FlashSaleItem，在Home.vue中引入FlashSale

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

  1. 将Home.vue中请求到的数据通过props传递到FlashSale.vue，再传递到FlashSaleItem.vue，并进行遍历展示

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

（6）配置猜你喜欢静态界面

  1. 在home子文件夹components内新建子文件夹youLike，并在youLike文件夹内新建YourLike.vue和YourLikeItem.vue

在这里插入图片描述

  1. 将静态界面放在YourLike.vue和YourLikeItem.vue中，并在YourLike中引入YourLikeItem，在Home.vue中引入YourLike

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

  1. 将Home.vue中请求到的数据通过props传递到YourLike.vue，再传递到YourLikeItem.vue，并进行遍历展示

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

（7）返回顶部组件

  1. 在home子文件夹components内新建子文件夹markPage，并在markPage文件夹内新建MarkPage.vue

在这里插入图片描述

  1. 将返回顶部SVG静态页面放到MarkPage.vue中，并在Home.vue中引入

在这里插入图片描述

在这里插入图片描述

  1. 在父组件Home.vue中定义事件，并以props的方式传递给MarkPage.vue。并通过属性showBackStatus控制MarkPage是否显示。

  2. 判断是否显示返回顶部按钮是一个可能全局都要使用的事件。所以将其抽出来。

① 在config文件夹中，新建global.js

② 在global.js中写滚动、触摸监听代码，并在满足条件的时候执行回调函数。

在这里插入图片描述

③ 在Home.vue中，引入global.js，并在created钩子中进行监听，通过判断是否需要显示返回顶部按钮，设置showBackStatus值，控制是否需要显示。

在这里插入图片描述

④ 在global.js中，写缓动函数

在这里插入图片描述

⑤ 在Home.vue中引入animate动画，并在点击事件中调用。

在这里插入图片描述

10. 配置分类界面

（1）新建文档

新建一下文件目录，并在对应子文件下新建vue组件

在这里插入图片描述

（2）在created钩子中请求数据

  1. 首先，要在server文件夹下的api文件夹下的index.js中，封装数据请求方法

在这里插入图片描述

  1. 在界面中引入接口，并使用async 和 await将异步函数转化为同步函数执行后续操作

在这里插入图片描述

（3）将Header.vue作为单独组件，在Category.vue中引入

在这里插入图片描述

（4）左侧推荐导航栏

  1. 左侧推荐导航栏基本没有扩展性，直接在Catergory.vue中写即可。同时，借助better-scroll进行滚动。

在这里插入图片描述

  1. 对请求下来的数据进行遍历，动态加载渲染左侧li标签

在这里插入图片描述

  1. 处理左侧推荐导航栏点击事件

① 导航栏样式处理

选中样式绑定在selected类上，通过对不同li标签删除添加class为selected即可实现更换

样式

在这里插入图片描述 通过给li标签绑定点击事件，更改currentIndex来更改当前具有selected类名的li标签，同时借助better-scroll中的控制滚动位置，同时，获取新的右侧数据

在这里插入图片描述

③ 与右边联动展示

（5）搭建右侧界面

  1. 将ContentView静态界面和ProductItem静态界面放到对应vue中，并在ContentView.vue中引入ProductItem.vue，在Category.vue中引入ContentView.vue

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

  1. 将Category.vue中请求到的数组传递到子组件中，并进行v-for显示即可

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

3. 如果想按照价格排序，可以定义一个新的数组，存储

在这里插入图片描述

11. 配置购物车界面

（1）将购物车静态界面放到Cart.vue中

在这里插入图片描述

在这里插入图片描述

（2）✨✨✨使用vuex管理购物车数据✨✨✨

  1. 在store中新建index.js，并在main中引入

在这里插入图片描述

  1. 在store文件夹下新建state.js（数据）、mutations（同步操作）、mutations-type（约束名称）、actions（异步操作）、getters（与state中数据相关的计算属性）。将vuex进行拆分。

在这里插入图片描述

并在index.js中进行汇总输出

在这里插入图片描述

  1. 在state.js中定义购物车商品对象

在这里插入图片描述

  1. 在mutations-type中定义方法名称

在这里插入图片描述

  1. 在mutations中实现添加方法

在这里插入图片描述

  1. 在界面上进行操作，调用ADD_GOODS添加商品方法

① 向购物车中添加的事件很多地方都要调用，因此借助消息订阅（pubsub-js），在组件中跨级通信。

② 安装pubsub-jsnpm install pubsub-js -S

③ 在Home.vue中，监听添加到购物车消息

在这里插入图片描述

④ 在YourLikeItem.vue中发布消息

在这里插入图片描述

⑤ 其他需要添加到购物车的地方操作相同

（3）借助vant中的反馈组件Toast文字提示，提示用户添加成功

  1. 在vant.js中引入

在这里插入图片描述

  1. 在需要提示的地方使用

在这里插入图片描述

（4）定义购物车数据本地化的接口

在这里插入图片描述

（5）因为购物车有一个数量标志要试试变化，所以在初始DashBoard的时候，就应该调用INIT_SHOP_CART初始化购物车

在这里插入图片描述

（6）增加计算属性，通过计算shopCart每个shop的num和，利用vant的tabbar的info属性，控制购物车数量商标

在这里插入图片描述

在这里插入图片描述

（7）在购物车界面遍历shopCart并在界面上显示

在这里插入图片描述

在这里插入图片描述

（8）购物车数量加减操作

  1. 首先在mutations.js中定义将商品移出购物车的方法——即商品数量为1仍然减得操作

在这里插入图片描述

  1. 在Cart.vue中配置删除商品的方法

在这里插入图片描述

（9）直接将ADD_GOODS引入到Cart.vue中进行商品数量的 增加

在这里插入图片描述

（10）商品单选事件处理

  1. 首先在mutations中定义单选事件在这里插入图片描述

  2. 在Cart.vue中对单选a标签进行事件绑定在这里插入图片描述

（11）商品全选事件处理

  1. 首先在mutations中定义全选事件在这里插入图片描述

  2. 在cart中使用计算属性selectedAll标识是否全选，并通过改属性控制是否全选点击事件

在这里插入图片描述

（12）总价计算

利用计算属性，通过shopCart中checked为true的数据，计算商品总价在这里插入图片描述

（13）去结算数量

通过计算属性，计算选中的商品数量

在这里插入图片描述

（14）清空购物车

  1. 在mutations中定义清空购物车方法

在这里插入图片描述

  1. 在Cart.vue中引入并使用清空购物车方法在这里插入图片描述

12. 配置订单界面

（1）配置填写订单路由

  1. 填写订单界面应该是和dashboard平行的，所以在views目录下新建order子文件夹，并在order文件夹下新建Order.vue在这里插入图片描述

  2. 在router文件夹内的index.js中配置路由在这里插入图片描述

  3. 在购物车中点击去结算的时候，转到订单界面

将去结算的a标签改为router-link标签，并用tag标识其原本标签名，并用to表示其跳转路由在这里插入图片描述

在这里插入图片描述

  1. 引入NavBar实现导航栏

① 在vant.js中引入NavBar

在这里插入图片描述

② 在Order.vue中进行引入配置在这里插入图片描述在这里插入图片描述

  1. 引入ContactCard 实现收货地址

① 在vant.js中引入ContactCard

在这里插入图片描述

② 在Order.vue中进行引入配置在这里插入图片描述

（2）配置我的地址界面

  1. 在order文件夹下，新建children文件夹，children文件夹下新建MyAddress.vue

在这里插入图片描述

  1. 配置路由

在这里插入图片描述

  1. 在我的订单中，实现点击选择收货地址跳转路由

在这里插入图片描述

  1. 引入vant组件AddressList实现我的地址

① 在vant.js中引入AddressList

在这里插入图片描述

② 在MyAddress.vue中进行引入配置

在这里插入图片描述

③ MyAddress.vue中，对div进行绝对定位，结合Order.vue中的transition，形成动画效果

在这里插入图片描述

（3）配置地址编辑界面和配置新增地址界面

  1. 在MyAddress.vue同级目录下，新建children文件夹，并在children文件夹内新建AddAddress.vue和EditAddress.vue

在这里插入图片描述

  1. 在index.js中配置路由

在这里插入图片描述

  1. 借助AddressEdit实现编辑地址和新增地址

① 引入AddressEdit

在这里插入图片描述

② 在EditAddress.vue中配置并实现编辑地址（添加地址类似）

在这里插入图片描述

③ 在我的地址中增加路由跳转

在这里插入图片描述

（4）配置下方Cell单元格 —— 借助vant中Cell组件

  1. 在vant.js中引入Cell和CellGroup

在这里插入图片描述

  1. 在Order.vue中进行定制

① 送达时间

在这里插入图片描述在这里插入图片描述

② 商品展示在这里插入图片描述在这里插入图片描述

③ 支付方式

在这里插入图片描述

在这里插入图片描述

④ 备注

在这里插入图片描述在这里插入图片描述

⑤ 商品金额、配送费

在这里插入图片描述

在这里插入图片描述

（5）配置下方提交栏——SubmitBar 提交订单栏

  1. 引入SubmitBar

在这里插入图片描述

  1. 在Order.vue中使用

在这里插入图片描述

在这里插入图片描述

13. 配置我的界面

(1) 导航 —— vant的nav-bar

在这里插入图片描述

在这里插入图片描述

(2)头像及其他信息 —— vant的cell

在这里插入图片描述

在这里插入图片描述

(3)我的订单、查看所有订单 —— vant的cell

在这里插入图片描述

在这里插入图片描述

(4)待支付、待收货、待评价、售后/退款 —— vant的Grid, GridItem

  1. 引入在这里插入图片描述

  2. 使用

在这里插入图片描述

(5) 我的优惠券、我的收货地址、联系客服、意见反馈、下载APP —— vant中的cell

在这里插入图片描述

在这里插入图片描述

14. 用户角色配置

（1）建立选择登陆界面、登录界面及配置选择登陆界面、登录界面路由

views新建文件夹login，并在子文件夹login中新建Login.vue和SelectLogin.vue，并将静态界面配置好

在这里插入图片描述

（2）在vuex的state中存储用户数据，并存储在本地

首先在state中，在vuex中声明userInfo数据。通过判断本地userInfo中是否存在token数据，来判断是否需要登录。在这里插入图片描述

（3）在购物车中进行判断是否显示选择登陆方式界面

在这里插入图片描述

（4）在我的中进行判断是否显示选择登陆方式界面

在这里插入图片描述

（5）给Login.vue登录界面配置独立路由

在这里插入图片描述

（6）在选择登陆方式界面，给手机登录配置路由跳转，并设置tag

在这里插入图片描述

（7）通过属性及时间控制登录界面方式及密码显示方式在这里插入图片描述

15. 用户中心接口

（1）短信验证码、手机验证码登录

  1. 在service/api/index.js中，实现接口在这里插入图片描述

  2. 在Login.vue中调用接口在这里插入图片描述

  3. 调用登录接口

在这里插入图片描述

  1. 登录成功后，将用户信息保存到本地

① 在vuex中实现将用户信息保存到本地以及获取用户信息的方法在这里插入图片描述

（2）🎡🎡🎡🎡🎡异步操作不可以使用mutations了，需要使用actions是🎡🎡🎡🎡🎡

手机号码验证登录的时候是异步操作了，不能直接通过mutations操作vuex，必须通过actions异步转同步。

  1. 在actions中定义同步方法，并调用mutations中的异步方法

在这里插入图片描述

  1. 在Login.vue中，使用异步方法

在这里插入图片描述

16. 账号密码登录

  1. 页面配置数据与input绑定在这里插入图片描述

  2. 点击登录判断有没有值

在这里插入图片描述

  1. service/api/index.js中实现pwdLogin用户名、密码登录方法

在这里插入图片描述

  1. Login中调用方法

在这里插入图片描述

17. 我的界面对本地数据进行渲染

在这里插入图片描述

18. 退出登录实现

  1. 新增界面在这里插入图片描述

  2. 配置路由在这里插入图片描述

  3. 界面中引用，配置转场动画在这里插入图片描述

  4. 在service/api/index中实现自动登录/退出登录实现

在这里插入图片描述

  1. 在mutations中实现重置用户数据

在这里插入图片描述

  1. 在UserCenter中实现退出登录在这里插入图片描述

  2. 在dashBoard中对用户数据进行同步

① 在actions中实现获取用户信息自动登录接口在这里插入图片描述

② 在DashBoart.vue中实现自动登录在这里插入图片描述

19. 购物车与用户角色进行绑定

（1）设置登录后才能向购物车中添加数据

在这里插入图片描述

（2）商品添加到购物车后，首先将商品同步到服务器，再存储到本地

  1. 定义添加到购物车接口在这里插入图片描述

  2. 在添加购物车的时候，将商品存放在本地之前，首先将商品同步到服务器

在这里插入图片描述在这里插入图片描述

（3）退出登录的时候清空购物车

在这里插入图片描述

20. 购物车优化

（1）自动登录

从服务器获取用户购物车数据，进行本地化并在购物车中显示

在这里插入图片描述

（2）商品修改从服务器同步修改

在这里插入图片描述

（3）清空购物车

在这里插入图片描述

21. 用户地址相关

（1）地址相关接口

在这里插入图片描述

（2）选择地址获取账户地址并显示

在这里插入图片描述

（3）新增地址

在这里插入图片描述

（4）编辑地址

  1. 在改变路由的时候，通过拼接url传递参数

在这里插入图片描述

获取的时候通过this.$route.query获取参数

在这里插入图片描述

  1. 将传递过来的信息在编辑界面显示——通过addressInfo绑定在这里插入图片描述

  2. 修改地址在这里插入图片描述

  3. 删除地址在这里插入图片描述

（5）选择地址后放到填写订单界面

在这里插入图片描述

在这里插入图片描述

22. 我的订单界面完善

（1）商品选中、删除生成订单商品等接口的实现

在这里插入图片描述

（2）购物车中单选、全选等与服务器同步

在这里插入图片描述

23. 去结算完善

（1）根据总额度判断能否点击去支付

在这里插入图片描述

（2）商品清单页面配置

  1. 新建OrderDetail.vue组件

  2. 配置路由

  3. 结合vant——Cart组件实现商品清单展示

（3）其他细节处理

在这里插入图片描述

24. 提交订单完善

（1）订单接口以及支付接口慎用

在这里插入图片描述

（2）提交订单

在这里插入图片描述

（3）生成支付二维码——借助vue-qriously

在这里插入图片描述

在这里插入图片描述

（4）验证用户是否支付成功

在这里插入图片描述

（5）后续处理

在这里插入图片描述

25. 待支付、待收货——借助vant的tab、tabs实现

  1. 配置路由

在这里插入图片描述

  1. 界面实现

在这里插入图片描述

26. rem配置

  1. 在config文件夹下新建rem.js

在这里插入图片描述

// 设置基准

const BASE = 15;

(function (doc, win) {

let docEl = doc.documentElement,

resizeEvt = ‘orientationchange’ in window ? ‘orientationchange’ : ‘resize’,

recall = function () {

let clientWidth = docEl.clientWidth;

if (!clientWidth) return;

docEl.style.fontSize = BASE * (clientWidth / 320) + ‘px’;

};

if (!doc.addEventListener) return;

win.addEventListener(resizeEvt, recall, false);

doc.addEventListener(‘DOMContentLoaded’, recall, false);

})(document, window);

  1. 在main.js中引入

在这里插入图片描述

27. 样式穿透

在配置swiper轮播图选中样式的时候，始终不生效。

在样式上，加上/deep/或者>>>即可

在这里插入图片描述

28. 加载中

在请求数据的时候，可能组件已经加载完成，此时可能就会导致一些BUG（比如轮播图跳转到最后一页后不再继续跳转、轮播图刚开始在最后一页）。这时候可以加上一个正在加载功能，当数据全部请求完成后再加载组件。

  1. 在vant.js中引入vant的Loading组件

在这里插入图片描述

  1. 在需要显示加载中的界面（Home.vue）中进行配置

在这里插入图片描述

29. 图片懒加载—借助vant的image组件实现

  1. vant.js中引入Image组件

在这里插入图片描述

  1. 配置图片

在这里插入图片描述

30. 全局过滤器

  1. 在config文件夹下新建文件夹filters，配置全局过滤器

在这里插入图片描述

在这里插入图片描述

  1. 在main.js中引入全局过滤器

在这里插入图片描述

  1. 在全局中使用| moneyFormat即可使用过滤器

31. 页面缓存 keep-alive

有些页面不需要每次进入的都是都重新加载，可以keep-alive，当下拉的时候进行刷新重新加载即可。

针对首页和分类进行页面缓存

  1. 在router中的index.js配置路由的时候，给需要添加缓存的界面增加一个meta属性，并在其中配置keepAlive:true

在这里插入图片描述

  1. 这这两个路由的出口——DashBoard.vue中增加一个keep-alive标签，里面存放需要进行缓存的路由，外面放不需要进行缓存的路由。是否需要缓存根据meta中的keepAlive属性进行判断。

在这里插入图片描述

32. 借助better-scroll实现滚动

  1. 安装集成npm install better-scroll -S

  2. 滚动原理：外层嵌套div，上下预留空间，监听点击滚动等事件

  3. 使用方法：

计算机网络

  • HTTP 缓存

  • 你知道 302 状态码是什么嘛？你平时浏览网页的过程中遇到过哪些 302 的场景？

  • HTTP 常用的请求方式，区别和用途？

  • HTTPS 是什么？具体流程

  • 三次握手和四次挥手

  • 你对 TCP 滑动窗口有了解嘛？

  • WebSocket与Ajax的区别

  • 了解 WebSocket 嘛？

  • HTTP 如何实现长连接？在什么时候会超时？

  • TCP 如何保证有效传输及拥塞控制原理。

  • TCP 协议怎么保证可靠的，UDP 为什么不可靠？

算法

  • 链表

  • 字符串

  • 数组问题

  • 二叉树

  • 排序算法

  • 二分查找

  • 动态规划

  • BFS

  • 栈

  • DFS

  • 回溯算法

2401_84419493
关注
  • 9
    点赞
  • 踩
  • 20
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
基于Vue的移动端的购物商城
11-27
实现完整的移动端购物商城界面 包括首页、分类、购物车以及个人中心 购物车与个人中心角色绑定 可以做进一步开发实现完整购物车功能
mimall:基于Vue2.x的移动端小米商城
05-17
该项目基于vue2.x，结合vue-cli+vue-router+axios+mint-ui+webpack共同完成，目前已经完成商城的主要功能，后续还会继续更新完善。 项目中运用了大部分vue常用的知识点，如vue基本指令、组件、计算属性、数据渲染、...
实战Vue：基于Vue的移动端购物商城，【最全总结】
2401_84098088的博客
04-06 2161
首先在mutations.js中定义将商品移出购物车的方法——即商品数量为1仍然减得操作在Cart.vue中配置删除商品的方法资料过多，篇幅有限，需要文中全部资料可以点击这里免费获取前端面试资料PDF完整版！自古成功在尝试。不尝试永远都不会成功。勇敢的尝试是成功的一半。22. 我的订单界面完善自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。
2024年前端最新实战Vue：基于Vue的移动端购物商城(1)，滴滴 战略 面试
2401_84619432的博客
05-14 796
首先在mutations.js中定义将商品移出购物车的方法——即商品数量为1仍然减得操作在Cart.vue中配置删除商品的方法开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】[外链图片转存中…(img-6s92CBPE-1715616463020)]
2024年Web前端最新实战Vue：基于Vue的移动端购物商城(3)，前端高级面试题2024
2301_82243603的博客
05-12 1028
首先在mutations.js中定义将商品移出购物车的方法——即商品数量为1仍然减得操作在Cart.vue中配置删除商品的方法开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】其中’/api’路由中被匹配到的路径，target是存在跨域的目标路径，changeOrigin为设置允许跨域，pathRewrite是重写路径，因为目标路径中原本就存在/api，所以将路径中第一个/api重写为空vue中axios通过代理解决跨域问题36. 点击验证码图片，重新请求图片并赋值。
Web前端最全实战Vue：基于Vue的移动端购物商城，2024年最新字节跳动最爱考的前端面试题
2401_84619565的博客
05-17 882
好了，这就是整理的前端从入门到放弃的学习笔记，还有很多没有整理到，我也算是边学边去整理，后续还会慢慢完善，这些相信够你学一阵子了。做程序员，做前端工程师，真的是一个学习就会有回报的职业，不看出身高低，不看学历强弱，只要你的技术达到应有的水准，就能够得到对应的回报。开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】学习从来没有一蹴而就，都是持之以恒的，正所谓活到老学到老，真正懂得学习的人，才不会被这个时代的洪流所淘汰。
实战Vue：基于Vue的移动端购物车单界面实现
KaiSarH
08-21 2084
基于Vue的移动端购物车单界面实现
2024年Web前端最新实战Vue：基于Vue的移动端购物商城(2)，2024年最新算法面试经典100题
2301_82243603的博客
05-12 833
开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】世界上只有一种真正的英雄主义就是在认清生活真相之后仍然热爱它在界面上进行操作，调用ADD_GOODS添加商品方法① 向购物车中添加的事件很多地方都要调用，因此借助消息订阅（pubsub-js），在组件中跨级通信。② 安装pubsub-js③ 在Home.vue中，监听添加到购物车消息④ 在YourLikeItem.vue中发布消息⑤ 其他需要添加到购物车的地方操作相同。
实战Vue：Mint UI移动端购物商城
wushen的博客
02-23 2449
文章目录UI组件库下载安装配置UI组件库使用mint-ui组件库中组件 UI组件库 组件库作用:提高开发效率 PC端组件库 饿了么 elementUI https://element.eleme.cn/#/zh-CN/ 移动端组件库 饿了么 mintui http://mint-ui.github.io/docs/#/zh-cn2 有赞: vant[vue 移动端/小程序项目] https://y...
vue实战 —— 图书商城移动端项目
2401_84412357的博客
04-27 1041
watch(() => {} else {return {disabled,mobile,pwd,pwdIcon,color,},state: {// 默认颜色// 存放数据，页面默认渲染的数据books: [],// 用于搜索},},return objlet result} else {},},actions: {//将请求的数据中的 list取出来},})登录子组件{{title}}登录后页面。
Vue3商城项目实战
shieryue_2016的博客
12-13 3401
本文介绍Vue3实现商品管理后台，内容包括项目构建、登录、账号管理、角色管理和商品管理等
CitySelector:基于vue的移动端城市选择组件
05-13
CitySelector基于vue的移动端城市选择组件手机扫这里看demo针对移动端的城市选择组件可以使用拼音或关键字进行检索，也可以在右侧检索栏快速滑动本地构建方法：clone后npm install->npm run dev欢迎大家提issues呀如...
totoro-vue：Totoro商城Vue移动端（SpringBoot + Vue前分离分离全栈开发）
02-04
龙猫 项目设置 yarn install 编译和热重装以进行开发 yarn serve 编译并最小化生产 yarn build 整理和修复文件 yarn lint 自定义配置 请参阅。
基于Vue.js的移动端在线购物商城系统毕业论文.docx
05-25
本文档资料适用于java php ssm springboot Vue python nodejs 微信小程序 Android app等,非常适合大专,本科等同学们作为参考资料使用 只需要把文中的内容替换成你需要的就行了哦,最少文档的各种图,比如说功能模块图,...
vue-video:vue移动端简单自定义控件播放器
05-13
vue-videovue移动端简单自定义控件播放器
vivo-shop：基于vue2.0实现的vivo移动端商城（vue + vuex-ruoter + vue-axios + webpack）
02-06
vue2.5 + ThinkPHP5.1全栈开发vivo商城 vue全家桶vue2.0 + vuex + axios + better-scroll还有就是miut-ui组件 :warning:注意：接口后台打不开服务器过期忘记续费导致服务器被释放，后台前端时间时间延长，预计5个...
基于Vue和TypeScript的移动端潮玩商城设计源码
04-17
本项目是基于Vue和TypeScript开发的移动端潮玩商城设计源码，共包含65个文件。其中TypeScript源代码文件26个，Vue组件文件16个，JSON配置文件5个，PNG图片文件3个，CSS样式文件2个，JPG图片文件2个，SCSS样式文件2个...
基于Vue的lilishop电商商城系统移动端设计源码
最新发布
05-23
lilishop商城-移动端是一个基于Vue开发的电商商城系统，包含510个文件，其中包括247个Vue文件、118个JavaScript文件、69个PNG图片文件、27个SCSS文件、20个TypeScript文件、7个JSON文件、7个Markdown文件、4个CSS...
基于vue实现移动端小米应用商城页面
08-05
基于Vue实现移动端小米应用商城页面需要进行以下步骤： 1. 界面设计：根据小米应用商城的界面设计需求，使用Vue框架中的组件库和样式预处理器进行页面的布局和设计。可以使用小米官方提供的UI组件库或者其他第三方...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值