• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    迪恩网络公众号

vue-store: vue移动端B2C商城

原作者: [db:作者] 来自: 网络 收藏 邀请

开源软件名称:

vue-store

开源软件地址:

https://gitee.com/szwtop/vue-store

开源软件介绍:

图片展示

这是一个牛逼的项目

牛不牛逼,用心去感受,每一行代码中的诗情雅意

我们是有灵魂的程序员,所以,我们的代码富有诗意

丫的,实在编不下去了

【主流开源协议之间有何异同?(https://www.zhihu.com/question/19568896?sort=created)】

用(传统方式)命令行把修改过后的代码上传到码云???

  1. git add .
  2. git commit -m "提交信息"
  3. git push

制作首页App组件

  1. 完成 Header 区域,使用的是 Mint-UI 中的Header组件
  2. 制作底部的 Tabbar 区域,使用的是 MUI 的 Tabbar.html
  • 在制作 购物车 小图标的时候,操作会相对多一些:
  • 先把 扩展图标的 css 样式,拷贝到 项目中
  • 拷贝 扩展字体库 ttf 文件,到项目中
  • 为 购物车 小图标 ,添加 如下样式 mui-icon mui-icon-extra mui-icon-extra-cart
  1. 要在 中间区域放置一个 router-view 来展示路由匹配到的组件

改造 tabbar 为 router-link

设置路由高亮

点击 tabbar 中的路由链接,展示对应的路由组件

制作首页轮播图布局

加载首页轮播图数据

  1. 获取数据, 如何获取呢, 使用 vue-resource
  2. 使用 vue-resource 的 this.$http.get 获取数据
  3. 获取到的数据,要保存到 data 身上
  4. 使用 v-for 循环渲染 每个 item 项

制作首页九宫格样式更改为六宫格 (使用的是 mui框架 中的九宫格)

  1. 设置六宫格样式
  2. 使用自定义的图片替换掉默认九宫格的字体图标

实现 content 部分以动画效果进行切换

改造 新闻资讯 路由链接(九宫格新闻资讯板块整个完成)

  1. 新闻资讯List 页面制作 (使用 MUI 实现整个NewList的页面制作),从后台获取数据渲染给NewList页面
  2. 新闻资讯List的 NewInfo(新闻详情页面) 页面包括整个功能实现完成,包括页面制作,后台数据渲染页面,用户评论功能

改造 图片分享 路由链接(图片分享板块整个完成)

  1. PhotoList(图片列表页) 页面采用的是 MUI框架的构建整个页面,选项卡是从后台获取的数据(坑,警报注意:前方有坑,有大坑(看来框架也不是这么友好,各种坑。。能力好的同学,若是不嫌麻烦,可以试试自己手写,毕竟也是对能力的一大提升,言归正传))
    • 头部采用选项卡切换(tab-top-webview-main.html),好吧。第一坑还是终将来临。。 坑1:使用选项卡切换的时候我们需要导入 mui 的js库(这里导入js库之后还需给要使用的相应组件配置,具体参考官网),额。。。某些同学可能抓头了是吧,心里忍不住念叨,玛得XX,这什么 LZ(实在没想出更新鲜的词。。)真想TM给他两XX,要使用 mui 的动态效果使用 mui 的js不是很正常麽? 哈哈,算你们懵对了,不过既然说是大坑我这么聪明怎么会让你们这么容易就给猜透? 好吧,我们继续往下看
    • 坑1(正式版): 在使用选项卡切换的时候在 HTML标签中 会出现一个类 mui-fullscreen,这个类表示占用全屏(本质上其实就是定位),根据情况而定是否取消这个类,一般情况下都是不占用全屏的(特定情况除外)
    • 坑2:某些同学可能已经发现了,当我们已经使用了 mui 官方提供的选项卡切换的标签语句,也是用了 mui.js库可是为什么还是不能进行选项卡切换(只有重新刷新页面时才能滑动)?这里面其实存在一个问题,其实稍微细心一点也能理解,当我们进行选项卡切换的时候进行的是 DOM 操作,所以我们配置的组件要在 mounted()钩子函数中配置(即使在mounted()中配置后,虽然实现了不用每次进入的时候都需要重新刷新页面,但也存在必需刷新一次的问题,这个问题LZ暂时还没得到解决,后续会继续更新),
    • 坑3:当实现选项卡可以滑动的时候发现 Tabbar点击不起作用。 这个真挺难解决的,LZ当时真的都懵逼了,其实这个真不管我们的事,原因在于使用 mui 选项卡切换的时候,内部的标签和 Tabbar 冲突了,解决方案:把 Tabbar 的类重命名,再把 Tabbar 中原有的样式复制到我们的代码中,根据我们的命名重新设置样式
  2. 从后台图片列表数据,并使用 mint-ui 中的延迟加载,在使用延迟加载时也有个坑就是不能显示延迟加载的图标。。。。LZ忍不住XX一句,额。。。还是算了吧!谁叫我们只是一个弱弱的码农呢?由于mint-ui内部原因我们不能使用按需导入组件方式,要使用全局导入,这样问题就解决了
  3. PhototInfo(图片详情页),使用了vue-preview插件,进行缩略图展示,其余没啥可说,就从服务器获取数据渲染就行了,评论组件我们之前已经封装了,直接调用组件即可

打卡,商品购买模块功能大致完成(包括商品列表和商品的详细页面)

  1. 添加商品到购物车,商品列表的页面绘制和商品详情的页面绘制
  2. 通过localStorage将购物车保存到本地持久化
  3. 购物车页面的绘制并展示购物车数据,购物车商品的更改和删除

OK。项目大致功能完成(除某些小部件及会员和搜索板块),用时:45天


鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
DiscuzX3.4: Discuz! X3.4 SC UTF8 Release 20190206发布时间:2022-03-25
下一篇:
vue-cms: 一个Vue框架做的移动端项目发布时间:2022-03-25
热门推荐
热门话题
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap