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

项目创建：

第一步:创建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