vue项目移动端商场

简介: 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)配置猜你喜欢静态界面

相关文章
|
2天前
|
JavaScript
vue知识点
vue知识点
10 3
|
4天前
|
JavaScript 前端开发
在 JeecgBoot 项目中基于 Vue 3 配置多页面入口
本文介绍了在JeecgBoot Vue 3项目中配置多页面入口的步骤。首先,确保下载了项目源码,然后在项目根目录创建`home.html`作为新页面模板。接着,在`src`下建立`multiPage/home`目录,包含`App.vue`和`main.ts`文件以构建新页面。最后,更新`build/vite/plugin/html.ts`中的`htmlPlugin`以支持多页面配置。完成这些步骤后,项目将具备管理多个独立页面的能力。
19 4
|
6天前
|
JavaScript
|
5天前
|
存储 缓存 JavaScript
vue代码优化方案
【7月更文挑战第13天】 **Vue.js 优化要点:** 分解大组件以提高复用性和加载速度;利用计算属性与侦听器优化数据处理;使用Object.freeze()减少响应式数据;借助Vuex或Composition API管理状态;实现虚拟滚动和无限加载提升长列表性能;路由懒加载减少初始加载时间;用Vue DevTools检测性能瓶颈;定期代码审查与重构;应用缓存策略;遵循最佳实践与团队规范,提升应用整体质量。
22 2
|
8天前
|
JavaScript 前端开发
【vue】 el-table解决分页不能筛选全部数据的问题
【vue】 el-table解决分页不能筛选全部数据的问题
23 4
|
8天前
|
JavaScript
【vue】 vue2 监听滚动条滚动事件
【vue】 vue2 监听滚动条滚动事件
16 1
|
8天前
|
JavaScript 定位技术
【天地图】vue 天地图 T is not defined
【天地图】vue 天地图 T is not defined
19 1
|
JavaScript 测试技术 容器
Vue2+VueRouter2+webpack 构建项目
1). 安装Node环境和npm包管理工具 检测版本 node -v npm -v 图1.png 2). 安装vue-cli(vue脚手架) npm install -g vue-cli --registry=https://registry.
1017 0
|
8天前
|
JavaScript
【vue】el-dialog 内的tinymce弹窗被遮挡的解决办法 及 tinymce打开弹出菜单后直接关闭对话组件,导致该弹出菜单残留
【vue】el-dialog 内的tinymce弹窗被遮挡的解决办法 及 tinymce打开弹出菜单后直接关闭对话组件,导致该弹出菜单残留
22 6
|
13天前
|
数据采集 JavaScript 前端开发
Vue框架的优缺点是什么
【7月更文挑战第5天】 Vue框架:组件化开发利于重用与扩展,响应式数据绑定简化状态管理;学习曲线平缓,生态系统丰富,集成便捷,且具性能优化手段。缺点包括社区规模相对小,类型支持不足(Vue 3.x改善),路由和状态管理需额外配置,SEO支持有限。随着发展,部分缺点正被克服。
22 1