项目创建:
第一步:创建Vue 项目(rourou)
vue init webpack rourou
第二步:集成第三方组件(axios(请求框架)\mock(模拟框架)\)
集成移动框架:vant
cnpm i vant -S
集成HTTP请求框架:axios
cnpm i axios -S
集成模拟数据框架:mock
cnpm i mock -S
集成样式框架:stylus 和stylus-loader
cnpm i stylus-loader -S
cnpm i stylus -S
集成滚动组件: 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