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

最新推荐文章于 2024-09-15 13:06:11 发布
最新推荐文章于 2024-09-15 13:06:11 发布
阅读量778 收藏 8
点赞数 3
分类专栏： 程序员 文章标签： vue.js 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/2401_84093490/article/details/137832784
版权
本文详细介绍了如何通过懒加载优化界面性能，使用VantUI库进行组件集成，如Dashboard、导航栏、轮播图和购物车管理。还涉及了路由设计、用户登录验证、Vuex状态管理以及前端开发中的其他关键模块，提供了一套完整的前端开发实践指南。
摘要由CSDN通过智能技术生成

在这里插入图片描述

① 在这里，只有DashBoard在界面刷新的时候就加载，其余界面采用懒加载的方式，在点击跳转或者访问的时候才进行加载，便于提升性能。

② dashboard一级路由存在的必要性：为后续注册登录等功能提准备。

③ 不直接export default new Router的原因：便于做路由守卫

  1. 效果

在这里插入图片描述

在这里插入图片描述

7. 集成UI组件库Vant

  1. 安装vant npm i vant –S

  2. 安装babel-plugin-impor支持vant局部引用 npm i babel-plugin-import -D

  3. 在babel.config.js中进行配置

在这里插入图片描述

  1. 在plugins文件夹下，新建vant.js。配置引入不同的vant组件。

在这里插入图片描述

  1. 在main.js中引入vant.js。需要引入什么组件直接在vant.js中做修改即可。

在这里插入图片描述

8. 集成Vant底部Tabbar标签栏

直接借助官网API快速引入组件

在这里插入图片描述

  1. active 当前选中标签的索引 Number

  2. active-color 选中标签的颜色 String #000000

  3. inactive-color 未选中标签的颜色 String #ffffff

  4. replace to 路由跳转

  5. 图片属性 :src=“props.active ? icon.active : icon.inactive” 设置选中/非选中图片

9. 配置首页界面

（1）在Home.vue中，通过axios请求网络数据

  1. 安装axios npm i axios -S，并且封装axios网络请求

  2. 在service文件夹中，新建子文件夹api，并在api中新建文件index.js。负责汇总各种接口。

在这里插入图片描述

  1. 在api文件夹中新建ajax.js

在这里插入图片描述

  1. 在ajax.js中封装axios网络请求，并以函数ajax的形式向外界暴露在这里插入图片描述

  2. 在index.js中，从ajax.js中引入ajax方法

在这里插入图片描述

  1. 在index.js中，定义接口基础路径

在这里插入图片描述

  1. 在index.js中，定义getHomeData方法，该方法是请求主页的数据，为get方法，拼接完整URL调用ajax方法发起axios的get请求，并向外界暴露该方法。

在这里插入图片描述

  1. 在Home.vue中，引入数据请求方法，并在创建组件完成后的created钩子选项中发起ajax请求。

在这里插入图片描述

在这里插入图片描述

（2）顶部地址定位、搜索栏

  1. 在home文件夹内，新建子文件夹components，存放home.vue的子组件

在这里插入图片描述

  1. 在子文件夹components中新建header文件夹，在header文件夹内新建Header.vue组件

在这里插入图片描述

  1. 在Header.vue中将写好的html即样式拷贝过来

在这里插入图片描述

  1. 在Home.vue中引入组件Header.vue

在这里插入图片描述

在这里插入图片描述

（3）轮播图（借助Swipervue-awesome-swiper实现）

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

在这里插入图片描述

  1. 安装vue-awesome-swiper npm install

  2. 配置轮播图

注意：

① 下载最新版本的vue-awesome-swiper可能按照官方文档有些功能无法使用，可以直接下载低版本

② 配置分页、自动播放等功能无效的话，引入的时候加入以下代码。其他功能无效也可以试一下这个。

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，并进行遍历展示

在这里插入图片描述

最低0.47元/天 解锁文章
2401_84093490
关注
专栏目录
Vue购物商城项目(一)
白瑕 的博客
07-03 6634
Vue购物商城项目 文章目录Vue购物商城项目前言一、pandas是什么？二、使用步骤1.引入库2.读入数据总结 前言 提示：这里可以添加本文要记录的大概内容： 例如：随着人工智能的不断发展，机器学习这门技术也越来越重要，很多人都开启了学习机器学习，本文就介绍了机器学习的基础内容。 提示：以下是本篇文章正文内容，下面案例可供参考 一、pandas是什么？ 示例：pandas 是基于NumPy 的一种工具，该工具是为了解决数据分析任务而创建的。 二、使用步骤 1.引入库 代码如下（示例）： import
基于vue框架的移动商城项目
你好！我是派大星，一个热爱分享的个人博客作者。我的博客致力于分享关于前端开发的知识、见解和经验。通过我的文章，实用技巧和个人心得。无论是解决问题、获取新知识，还是激发创造力和热情，我的目标是为读者提供有价值的内容和启发思考的观点。
06-21 1394
在完成这个项目的过程中，我收获颇丰。作为一个前端开发者，我深入了解并熟练使用了Vue框架，在项目中大量运用了Vue的组件化特性和状态管理工具Vuex。我也掌握了一些其他技术，如git版本控制、API接口使用等。在开发过程中，我还尝试了一些新的组件库和工具，如axios，以提高项目的效率。在完成这个项目的过程中，我也遇到了一些挑战。其中包括对API接口数据格式的处理问题，以及一些样式兼容性问题。
一个基于vue的pc端综合性网上购物商城
08-12
一个基于vue的pc端综合性网上购物商城，包括前台商城和后台管理系统，后端采用koa2，数据库采用mysql
基于Vue的移动端的购物商城
11-27
实现完整的移动端购物商城界面 包括首页、分类、购物车以及个人中心 购物车与个人中心角色绑定 可以做进一步开发实现完整购物车功能
如何使用Vue框架开发移动端应用？
最新发布
alankuo的专栏
09-15 565
总之，使用 Vue 框架开发移动端应用需要掌握 Vue 的基本语法和开发模式，同时了解移动端开发的特点和需求。同时，也可以使用一些移动端调试工具，如微信开发者工具、VConsole 等，来调试在手机上运行的应用。- 将打包后的代码部署到服务器上，可以使用静态文件服务器（如 Nginx）或者云服务提供商（如阿里云、腾讯云等）进行部署。- 对于移动端应用，还需要考虑触摸事件的处理，如滑动、缩放等。- 例如，可以创建一个头部组件、一个底部导航组件、一个内容组件等，然后在页面中组合这些组件。
springboot基于vue的在线零食商城系统
2301_79305643的博客
07-09 634
摘 要在线零食商城系统的目的是让使用者可以更方便的将人、设备和场景更立体的连接在一起。能让用户以更科幻的方式使用产品，体验高科技时代带给人们的方便，同时也能让用户体会到与以往常规产品不同的体验风格。与安卓，iOS相比较起来，在线零食商城系统在流畅性，续航能力，等方方面面都有着很大的优势。这就意味着在线零食商城系统的设计可以比其他系统更为出色的能力，可以更高效的完成最新的客服聊天、商品资讯、商品信息、商品订单等管理功能。此系统设计主要采用的是JAVA语言来进行开发，采用springboot框架技术，框架分为
【014】基于Vue.js的移动端购物商城网站(含源码、课设报告)
热门推荐
lllbn的博客
12-15 1万+
一、系统概述本部分主要是对项目进行简要描述，包括开发背景、目的、内容及意义。Vue.js是一个轻巧、高性能、可组件化的MVVM库，同时拥有非常容易上手的API，通过Vue.js开发微商城项目，以轻量级的框架，实现双向数据绑定，并进行模块化开发。该商城项目实现了基本的商品分类、商品导航栏首页、个人订单详情、个人信息界面。二、开发环境本部分介绍项目开发中使用的环境，包括使用的操作系统、代码编辑工具、项目调试工具、项目中使用的脚手架等。操作系统：win10。
基于vue制作的购物商城系统
GuduGUdu_gudu的博客
06-30 2341
本购物商城系统的功能，主要是后端管理系统，角色就分为普通用户和管理员两大角色，主要功能包括：商品信息管理、商品类别管理、管理员信息管理、购物车信息管理、用户管理、修改密码、用户购买、用户评论、用户余额充值与显示、购物状态更新以上为我完成的购物商城系统。
基于 Vue.js 的移动端购物商城附详细代码
一步一个脚印，踏实努力，向着目标前进
06-12 2688
基于 Vue.js 的移动端购物商城，可以使用 Vue CLI 快速搭建项目，同时使用 Vue Router 实现路由跳转和状态管理，使用 Axios 发送 HTTP 请求获取数据。以下是一个简单的示例，包含了商品列表、商品详情、购物车等功能。
基于Vue开发的XMall商城前台页面PC端
08-09
基于Vue开发的XMall商城前台页面 PC端
lyfvue这是一个基于vue2开发在线商城前端
08-10
lyf-vue 这是一个基于vue2开发在线商城前端
基于vue20的微商城
08-10
该项目采用vue2.0版本开发，路由采用vue-router,数据交互采用vue-rescource
基于Vue的完整电商系统
01-10
基于SpringBoot+MyBatis实现。 前台商城系统包含首页门户、商品推荐、商品搜索、商品展示、购物车、订单流程、会员中心、客户服务、帮助中心等模块。 后台管理系统包含商品管理、订单管理、会员管理、促销管理、运营管理、内容管理、统计报表、财务管理、权限管理、设置等模块。
基于vue3写的简单购物商城项目
神尐破
08-09 2312
概述概述基于vue3所写的商城类型项目运用vue3自带setup所写供大家参考详细项目结构。
推荐项目：Vue-Mall - 基于Vue.js的电商商城平台
gitblog_00076的博客
03-25 615
推荐项目：Vue-Mall - 基于Vue.js的电商商城平台 vue-mall???? 基于 vue+node+mongodb 实现一个锤子商城项目地址:https://gitcode.com/gh_mirrors/vu/vue-mall 项目简介 是一个由Vue.js构建的开源电商购物平台。它提供了一个完整的前端解决方案，包括商品浏览、购物车管理、订单流程等常见电商功能。开发者可以基于此项目快速搭...
基于Vue + Typescript开发的Ego移动端购物商城
weixin_34111790的博客
09-20 667
Ego 移动端购物商城 基于vue2.0 + typescript技术开发的移动端项目, 使用官方推荐最新的脚手架搭vue-cli 3.x搭建 开发者：稻草叔叔 项目地址：github.com/vincentSea/… 界面 项目所有的界面都是自己设计的， 当然肯定有参考因素存在。 技术栈 核心: vue + typescript +...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值