Vue +Vant 静态电商商城app(首页版)分析

访客 阅读:238 2021-03-31 12:24:22 评论:0

项目创建:

第一步:创建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:核心页面

login/Login.vue :商城登入页面

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

Cart.vue: 购物车页面

Home.vue:商城首页

User.vue:用户页面

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

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

router:路由文件

main:核心配置文件

App.vue :程序入口

项目效果截图说明:

登入、注册

商城首页

其他页面:待集成

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

 

声明

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

发表评论
搜索
KIKK导航

KIKK导航

排行榜
关注我们

一个IT知识分享的公众号