项目创建：

第一步:创建Vue 项目(rourou)

vue init webpack rourou

第二步:集成第三方组件(axios(请求框架)\mock(模拟框架)\)

集成移动框架:vant

vant 官网地址

cnpm i vant -S

集成HTTP请求框架:axios

cnpm i axios -S

集成模拟数据框架:mock

cnpm i mock -S

集成样式框架:stylus 和stylus-loader

stylus和stylus-loader 基础说明

cnpm i stylus-loader -S

cnpm i stylus -S

集成滚动组件: better-scroll

better-scroll 基础说明

cnpm i better-scroll -S

项目结构说明:

components:封装组件

SearchBar.vue：检索框组件封装

HeaderBar.vue：头部导航栏组件封装

FooterBar.vue：底部导航栏组件封装

goodItem/goodItem.vue: 商品类别组件封装

scroll/scrollX.vue: 滚动条组件封装

tabItem/tabItem.vue：商品分类组件封装

page:核心页面

reg/Reg.vue: 用户注册页面

Cart.vue: 购物车页面

Home.vue:商城首页

User.vue:用户页面

images:本地静态资源文件夹(本静态商城所有图片资源)

util:通用工具类封装(主要：正则表达式)

router:路由文件

main:核心配置文件

App.vue :程序入口

项目效果截图说明:

登入、注册

商城首页

其他页面：待集成

项目Github 地址:https://github.com/zhouzhiwengang/rourou

Vue +Vant 静态电商商城app（首页版）相关推荐

vue实战项目-电商商城前台-（学习尚硅谷的）尚品汇
文章目录最好使用视频上的账号密码,13700000000 密:111111 最新服务端接口地址:http://gmall-h5-api.atguigu.cn 脚手架使用 1.创建项目 2.脚手架默认 ...
vue+element模仿电商商城，前后端分离实现，下单微信扫码支付
1.前言接上一篇<vue+element+SpringBoot+OAuth2+Spring Security+Redis+mybatis-plus+mysql+swagger模仿商城,前后端分 ...
vue+element简单实现商城网站首页，模仿电商商城
1.安装启动vue项目可参考 vue+element简单实现商城网站首页,模仿小米电商商城https://blog.csdn.net/lucky_fang/article/details/121544 ...
基于Vue开发的电商APP项目——蘑菇街app
基于Vue开发的电商APP项目--蘑菇街项目源码:https://github.com/Limna777/Shopmall.git 1.项目描述 2.使用的插件或第三方库 3.页面主要实现的功能 1 ...
WoShop多商户直播电商系统APP+小程序+H5全开源无加密商城源码
WoShop多商户直播电商系统APP+小程序+H5全开源无加密商城源码随着多商户直播电商系统的市场走向兴盛,不止直播电商系统的使用越来越广泛,寻求多商户直播电商系统源码的人也越来越多.但源码市场混乱 ...
Axure通用版电商后台管理系统+通用版移动端商城商户端+电商管理系统+对账管理+消息管理+内容管理+运营管理、会员管理、订单管理、促销管理、财务管理+通用版商城前后端电商系统+电商用户数据大屏看板
作品介绍:Axure通用版电商后台管理系统+通用版移动端商城商户端+电商管理系统+对账管理+消息管理+内容管理+运营管理.会员管理.订单管理.促销管理.财务管理+通用版商城前后端电商系统+电商用户数据 ...
跨境电商系统开发-电商商城系统平台定制方案
随着业务的拓展,不少企业开始将目光转向国外市场,那么如何定制一套属于想自己的跨境出海电商商城方案呢?需要做好以下关口把关: 欢迎名片交流探讨开发平台流程买家端(h5/pc/app) www.mar ...
宠物电商社区APP的设计与实现
摘要:为了设计并实现具有宠物产品商城和问答社区功能的APP,通过比较国内外宠物行业电商发展现状和国内已有的宠物电商平台的优缺点,分析可行性和需求,从而进行详细设计和实现.该APP后台采用SSM框架 ...
来客推仿拼多多电商商城小程序源码
简介: 一款来客推内核仿拼多多电商商城小程序源码,APP+钱包+开源版. 安装步骤: 环境要求环境配置正常,最好是PHP5.6+Mysql5.5 win下面可以使用phpstudy集成环境部署安装 ...

Vue +Vant 静态电商商城app（首页版）

项目创建：

项目结构说明:

项目效果截图说明:

Vue +Vant 静态电商商城app（首页版）相关推荐

最新文章

热门文章