Mall

练习Vue时写的移动端商城项目,目前已经部署到线上。

对应API服务

使用Python FastAPI构建

FastAPI服务地址: https://github.com/CoderCharm/MallAPI

项目进度

• 完成首页，分类页，购物车等页面，还差个人中心(2020/06/30)

线上地址 https://www.charmcode.cn/app/mall/home

PC端, Google浏览器需要F12 点击切换移动设备

存在问题

这些问题，暂时先不解决，整体完成后在解决。

• 1 内容滚动不自然。
• 2 有时候，首次进入页面，不能滑动内容。(疑似没有重新计算内容高度)
• 3 没有记录滚动高度，切换分类时，滚动高度没有初始化。(应该单独记录每个分类的滚动高度)
• 4 没有Toast弹窗提示。(后续完善)
• 5 详情页，部分样式不完善。(不完善了)
• 6 由于数据问题，商品详情页goodsId只有 123, 456, 789三个可以传。
• 7 swiper 获取元素失败报错问题。(使用vue-awesome-swiper替换)

部署到线上 (同一个域名，部署多个Vue静态文件服务)

地址 DEPLOYMENT.md 个人总结

Src文件目录

|____App.vue
|____config
| |____index.js               // 简单的自定义配置文件 比如请求的地址 生产和开发地址(ps:vue-cli会自动帮我们区分生产开发，npm run serve就是开发，build生产)
|____utils
| |____request.js             // 封装的 axios服务
| |____public.js
| |____url.js                 // 在这里读取区分 开发生产的根路径
|____main.js
|____components               // 全局组件
| |____content                // 只能本项目通用的全局组件
| | |____tabControl
| | | |____TabControl.vue
| | |____mainTabbar
| | | |____MainTabBar.vue
| | |____backTop
| | | |____BackTop.vue
| |____HelloWorld.vue
| |____common                 // 其他地方也能用的全局组件
| | |____navbar
| | | |____NavBar.vue
| | |____swiper
| | | |____Swiper.vue
| | | |____SwiperItem.vue
| | | |____index.js
| | |____scroll
| | | |____scroll.vue
| | |____tabbar
| | | |____TabBarItem.vue
| | | |____TabBar.vue
|____common                  
| |____mixin.js
|____api                      // 配合axios 区分的各模块路由
| |____index.js
| |____home.js
| |____category.js
| |____detail.js
|____views                   // 各模块页面
| |____demo
| | |____Demo.vue
| | |____childComps
| |____home
| | |____Home.vue
| | |____childComps
| | | |____FeatureView.vue
| | | |____HomeSwiper.vue
| | | |____GoodListItem.vue
| | | |____RecommendView.vue
| | | |____GoodsLIst.vue
| |____category
| | |____Category.vue
| | |____childComps
| | | |____LeftBar.vue
| | | |____GoodListItem.vue
| | | |____GoodsLIst.vue
| | | |____TabBar.vue
| |____shopcart
| | |____childComps
| | | |____DelBottomBar.vue
| | | |____ShopListItem.vue
| | | |____SettleBottomBar.vue
| | |____ShopCart.vue
| |____detail
| | |____Detail.vue
| | |____childComps
| | | |____DetailSwiper.vue
| | | |____GoodsDisplay.vue
| | | |____GoodsStyleInfo.vue
| | | |____LogisticsInfo.vue
| | | |____DiscountInfo.vue
| | | |____BottomBar.vue
| | | |____CommentInfo.vue
| | | |____BaseInfo.vue
| | | |____SaleInfo.vue
| | | |____ShopInfo.vue
| | | |____DetailTabBar.vue
| |____profile
| | |____Profile.vue
|____assets
| |____css
| | |____reset.less
| | |____normalize.css
| | |____base.css
| |____img
| | |____tabbar
| | | |____home.svg
| | | |____profile_active.svg
| | | |____home_active.svg
| | | |____category.svg
| | | |____category_active.svg
| | | |____shopcart.svg
| | | |____shopcart_active.svg
| | | |____profile.svg
| | |____common
| | | |____yes.svg
| | | |____shop.svg
| | | |____check.svg
| | | |____back.svg
| | | |____cust.svg
| | | |____top.svg
| | | |____heart.svg
| |____logo.png
|____store
| |____index.js
|____router                        // vue-router 本地路由文件
| |____index.js                    

Project setup

npm install

Compiles and hot-reloads for development

npm run serve

Compiles and minifies for production

npm run build

Run your tests

npm run test

Lints and fixes files

npm run lint

Customize configuration

See Configuration Reference.