vue项目移动端商场

一、项目前端页面展示


二、项目整体目录结构


三、项目流程
1. vue快速创建基础项目
创建项目
vue create hk-shop
1
选择需要的配置


创建基础文件夹目录
src文件夹下文件夹目录:
① views 文件夹存放界面
② components 文件夹存放界面中局部组件
③ config 文件夹存放各种全局配置
④ images 文件夹存放图片
⑤ plugins 文件夹存放各种插件
⑥ router 文件夹存放路由
⑦ store 文件夹存放vuex相关文件
⑧ service 文件夹存放服务器端相关操作,接口等
⑨ style 文件夹存放样式

2. 移动端开发——配置FastClick
什么是FastClick?
① FastClick 是一个简单易用的库,它消除了移动端浏览器上的物理点击和触发一个 click 事件之间的 300ms 的延迟 ;
② 目的就是在不干扰你目前的逻辑的同时,让你的应用感觉不到延迟,反应更加灵敏;
③ 实现原理: 在检测到touchend事件的时候,会通过DOM自定义事件立即出发模拟一个click事件,
并把浏览器在300ms之后真正的click事件阻止掉。

为什么会存在延时?
① 移动端浏览器会从你点击按钮之后,等待大约 300ms 才会触发点击事件
② 原因是浏览器会等待看你的行为是否会是双击

配置方法
① 将fastclick拉取到项目中 npm i fastclick -S
② 配置方案
Ⅰ直接在main.js中进行配置
main.js

// 1. 引入FastClick
import FastClick from 'fastclick'
// 2. 配置FastClick
if ('addEventListener' in document) {
    document.addEventListener('DOMContentLoaded', function () {
        FastClick.attach(document.body);
    }, false);
}
1
2
3
4
5
6
7
8


Ⅱ 在plugin文件夹中新建FastClick.js并在其中配置,并将其在main.js中引入

3. 在public文件夹下的index.html中,修改页面标题(title)和logo(ico)

4. 配置全局样式
在style文件夹下新建commen.less,并在里面写好全局样式
在main.js中引入

5. 搭建主界面
要进行多界面切换,要在views文件夹内进行配置不同界面。在views文件夹下,每一个模块对应一个子文件夹。home — 主页、category — 分类、cart — 购物车、mine — 我的、dashboard — 主面板。
在每一个子文件夹(home、category、cart、mine、dashboard)下创建对应的页面。
举例:dashboard.vue

6. 配置路由
在router.js中,新建index.js文件夹。

在main.js中,引入router。并将其挂载到Vue对象上。

在新建的index.js中,配置路由

① 在这里,只有DashBoard在界面刷新的时候就加载,其余界面采用懒加载的方式,在点击跳转或者访问的时候才进行加载,便于提升性能。
② dashboard一级路由存在的必要性:为后续注册登录等功能提准备。
③ 不直接export default new Router的原因:便于做路由守卫
效果


7. 集成UI组件库Vant
安装vant npm i vant –S

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

在babel.config.js中进行配置


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


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


8. 集成Vant底部Tabbar标签栏
直接借助官网API快速引入组件


active 当前选中标签的索引 Number
active-color 选中标签的颜色 String #000000
inactive-color 未选中标签的颜色 String #ffffff
replace to 路由跳转
图片属性 :src=“props.active ? icon.active : icon.inactive” 设置选中/非选中图片
9. 配置首页界面
(1)在Home.vue中,通过axios请求网络数据
安装axios npm i axios -S,并且封装axios网络请求

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


在api文件夹中新建ajax.js


在ajax.js中封装axios网络请求,并以函数ajax的形式向外界暴露

在index.js中,从ajax.js中引入ajax方法


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


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


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

(2)顶部地址定位、搜索栏
在home文件夹内,新建子文件夹components,存放home.vue的子组件


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


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


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

(3)轮播图(借助Swipervue-awesome-swiper实现)
在home子文件夹components内新建子文件夹sowing,并在sowing文件夹中新建Sowing.vue


安装vue-awesome-swiper npm install

配置轮播图
注意:
① 下载最新版本的vue-awesome-swiper可能按照官方文档有些功能无法使用,可以直接下载低版本
② 配置分页、自动播放等功能无效的话,引入的时候加入以下代码。其他功能无效也可以试一下这个。

import Swiper2, {Navigation, Pagination, Autoplay} from 'swiper';

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


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


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


(4)中部导航nav
在home子文件夹components内新建子文件夹nav,并在nav文件夹中新建Nav.vue


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

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


(5)限时抢购
在home子文件夹components内新建子文件夹flashSale,并在flashSale文件夹中新建FlashSale.vue和FlashSaleItem.vue


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


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

(6)配置猜你喜欢静态界面

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/web/15256.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【排序算法】——归并排序(递归与非递归)含动图

制作不易,三连支持一下吧!!! 文章目录 前言一.归并排序递归方法实现二.归并排序非递归方法实现 前言 这篇博客我们将介绍归并排序的原理和实现过程。 一、归并排序递归方法实现 基本思想: 归并排序(MERGE-…

JS(ES_6)_2

1.创建对象的6种方式&#xff1a; 1. obnew Object() ob.nameah ob.age18 2. ob{name:ah,gae:18} 3.工厂模式&#xff1a; 设计一个函数&#xff0c;专门生产Person类型的对象 <script>function createPerson(name,age,family) {var o new Object();o.name name;o.…

软件设计师备考 | 案例专题之数据流图 概念与例题

案例分析专题大纲&#xff1a; 数据流图基本概念 基本图形元素&#xff1a;外部实体、加工、数据存储、数据流 数据流&#xff1a;由一组固定成分的数据组成&#xff0c;表示数据的流向。在DFD中&#xff0c;数据流的流向必须经过加工。加工&#xff1a;描述了输入数据流到输出…

啊哈!算法-第2章-栈、队列、链表

啊哈!算法-第2章-栈、队列、链表 第1节 解密qq号——队列第2节 解密回文——栈第3节 纸牌游戏——小猫钓鱼第4节 链表第5节 模拟链表 第1节 解密qq号——队列 新学期开始了&#xff0c;小哈是小哼的新同桌(小哈是个大帅哥哦~)&#xff0c;小哼向小哈询问 QQ 号&#xff0c; 小…

算法提高之线段树

算法提高之线段树 存储方式 线段树除了最后一层叶子节点以外是一个满二叉树类似堆的形式 因此可以用堆来存储线段树同时注意到 数组是可以模拟堆的 因此我们可以用一位数组来存储线段树 节点编号为u&#xff0c;对应左子树编号为2 * u&#xff0c;右子树编号为2 * u 1装逼一…

C++ 学习 指针上

&#x1f64b; 继续C Primer 第五版的学习 注 后面还会有关于指针进一步的学习 本篇为基础篇 &#x1f33f;可以先看看这两篇 或许可以进一步加深一下对指针的理解 指针和数组 指针简介 &#x1f308; 上一次讲了 C中的引用&#xff0c;现在总结一下指针和引用的主要区别。 …

uniapp微信小程序解决open-type获取用户头像,返回临时路径问题!

解决 open-type 为 chooseAvatar&#xff0c;返回临时路径问题 文章目录 解决 open-type 为 chooseAvatar&#xff0c;返回临时路径问题效果图Demo获取头像回调数据结构效果图解决方式上传到服务器转base64 基于微信小程序获取头像昵称规则调整后&#xff0c;当小程序需要让用户…

深入了解FreeRTOS:实时操作系统的核心概念和应用

前言&#xff1a; 在当今数字化世界中&#xff0c;嵌入式系统扮演着至关重要的角色&#xff0c;从工业自动化到智能设备&#xff0c;无所不在。而实时操作系统&#xff08;RTOS&#xff09;则是这些系统的核心引擎&#xff0c;它们负责管理任务、资源和时间&#xff0c;确保系统…

RmlUi 初试,hello world

前言 最近在研究GUI的各个方面&#xff0c;最后被导向了web render&#xff0c;真的是一言难尽。 这里就其中一个比较有意思的项目 RmlUi 浅试一下&#xff0c;没想要还挺麻烦&#xff01;这里留下note以供后人参考。 环境搭建 Windows VS2022 pre-binary library 需要指…

高通Android 12/13 设置和获取ADB状态

/*** 设置ADB状态** param isEnable*/public void setADB(boolean isEnable) {Settings.Global.putInt(mContext.getContentResolver(), Settings.Global.ADB_ENABLED, isEnable ? 1 : 0);}/*** 获取ADB状态** return*/public boolean getADB() {return Settings.Global.getIn…

虚拟化技术[3]之网络虚拟化

网络虚拟化 网络虚拟化简介核心层网络虚拟化接入层网络虚拟化虚拟机网络虚拟化案例: VMware网络虚拟化技术虚拟网络接口卡虚拟交换机vSwitch分布式交换机端口组VLAN 网络虚拟化简介 传统的数据中心&#xff1a;服务器之间操作系统和上层软件异构、接口与数据格式不统一&#x…

链表相交-力扣

在做这道题时&#xff0c;首先想到的解法是遍历第一个链表&#xff0c;将其全部添加到哈希表中&#xff0c;然后遍历第二个链表&#xff0c;如果能够再哈希表中查到元素&#xff0c;则返回这个元素&#xff0c;否则返回NULL。 但在实际写代码时&#xff0c;第一次写默认为链表相…

Redis实现MQ

MQ的提出 上游发出请求后阻塞等待下游给到反馈&#xff0c;否则整个流程将一直阻塞。 提出mq之后&#xff1a;即有producer mq consumer 三者 MQ的特点 异步解耦 在有了 mq 后&#xff0c;producer 不需要过分关心 consumer 的身份信息&#xff0c;只需要把消息按照指定的协议…

Python 潮流周刊#52:Python 处理 Excel 的资源

本周刊由 Python猫 出品&#xff0c;精心筛选国内外的 250 信息源&#xff0c;为你挑选最值得分享的文章、教程、开源项目、软件工具、播客和视频、热门话题等内容。愿景&#xff1a;帮助所有读者精进 Python 技术&#xff0c;并增长职业和副业的收入。 本期周刊分享了 12 篇文…

基于hive的酒店价格数据可视化分析系统设计和实现

摘要 本文基于Django框架和Hive技术&#xff0c;设计和实现了一种酒店价格数据可视化分析系 统&#xff0c;旨在为酒店管理者提供直观、清晰的数据洞察和决策支持。在研究中&#xff0c;首先深入分 析了酒店价格数据可视化分析系统的背景和意义&#xff0c;认识到对于酒店行…

3.Redis之Redis的环境搭建redis客户端介绍

1.版本的选取 安装 Redis&#xff1a;Redis 5 系列~~ 在 Linux 中进行安装~~ Redis 官方是不支持 Windows 版本的~~ 微软维护了一个 Windows 版本的 Redis 分支 Centos和Ubuntu.Docker 2.如何进行安装&#xff1f;&#xff1f;&#xff1f; 1.ubuntu 2.centos yum instal…

arcgisPro将一个图层的要素复制到另一个图层

1、打开两个图层&#xff0c;如下&#xff0c;其中一个图层中有两个要素&#xff0c;需要将其中一个要素复制到另一个图层中&#xff0c;展示如下&#xff1a; 2、选中待复制要素&#xff0c;点击复制按钮&#xff0c;如下&#xff1a; 3、下拉粘贴按钮列表&#xff0c;选择【选…

利用oracle默认事务隔离级别(提交读)提升多表联查速度

利用oracle默认事务隔离级别(提交读)提升查询速度) 背景介绍&#xff1a; 数据量大查询缓慢&#xff0c;添加太多条件&#xff0c;使用IN走了全表查询导致查询速度缓慢。 解决方案&#xff1a; 版本一&#xff1a; 新建临时表&#xff0c;在查询是将数据插入到临时表中&#…

Python 根据点云索引提取点云

点云索引滤波 一、介绍1.1 概念1.2 参数设置二、代码示例三、结果示例一、介绍 1.1 概念 点云索引滤波 是一种常用的点云滤波方法,根据给定的索引列表获取点云中的索引点,或着根据给定的索引列表获取点云中的非索引点。 1.2 参数设置 核心函数: def select_by_index(self, …

Ubuntu22.04虚拟机设置静态IP

虚拟机设置静态IP 按下电脑的 “win”键&#xff0c;在弹出的输入框中输入“控制面板”&#xff0c;选中控制面板 1.选择 “网络和Internet” 2.选择 “网络和共享中心” 3.选择 “更改适配器设置” 4.选择 “VMnet8”&#xff0c;双击打开 5.选择 “属性” 找到 “Internet …