开源软件名称:vue-store
开源软件地址:https://gitee.com/szwtop/vue-store
开源软件介绍:
图片展示这是一个牛逼的项目牛不牛逼,用心去感受,每一行代码中的诗情雅意我们是有灵魂的程序员,所以,我们的代码富有诗意丫的,实在编不下去了【主流开源协议之间有何异同?(https://www.zhihu.com/question/19568896?sort=created)】 用(传统方式)命令行把修改过后的代码上传到码云???- git add .
- git commit -m "提交信息"
- git push
制作首页App组件- 完成 Header 区域,使用的是 Mint-UI 中的Header组件
- 制作底部的 Tabbar 区域,使用的是 MUI 的 Tabbar.html
- 在制作 购物车 小图标的时候,操作会相对多一些:
- 先把 扩展图标的 css 样式,拷贝到 项目中
- 拷贝 扩展字体库 ttf 文件,到项目中
- 为 购物车 小图标 ,添加 如下样式
mui-icon mui-icon-extra mui-icon-extra-cart
- 要在 中间区域放置一个 router-view 来展示路由匹配到的组件
改造 tabbar 为 router-link设置路由高亮点击 tabbar 中的路由链接,展示对应的路由组件制作首页轮播图布局加载首页轮播图数据- 获取数据, 如何获取呢, 使用 vue-resource
- 使用 vue-resource 的 this.$http.get 获取数据
- 获取到的数据,要保存到 data 身上
- 使用 v-for 循环渲染 每个 item 项
制作首页九宫格样式更改为六宫格 (使用的是 mui框架 中的九宫格)- 设置六宫格样式
- 使用自定义的图片替换掉默认九宫格的字体图标
实现 content 部分以动画效果进行切换改造 新闻资讯 路由链接(九宫格新闻资讯板块整个完成)- 新闻资讯List 页面制作 (使用 MUI 实现整个NewList的页面制作),从后台获取数据渲染给NewList页面
- 新闻资讯List的 NewInfo(新闻详情页面) 页面包括整个功能实现完成,包括页面制作,后台数据渲染页面,用户评论功能
改造 图片分享 路由链接(图片分享板块整个完成)- 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 中原有的样式复制到我们的代码中,根据我们的命名重新设置样式
- 从后台图片列表数据,并使用 mint-ui 中的延迟加载,在使用延迟加载时也有个坑就是不能显示延迟加载的图标。。。。LZ忍不住XX一句,额。。。还是算了吧!谁叫我们只是一个弱弱的码农呢?由于mint-ui内部原因我们不能使用按需导入组件方式,要使用全局导入,这样问题就解决了
- PhototInfo(图片详情页),使用了vue-preview插件,进行缩略图展示,其余没啥可说,就从服务器获取数据渲染就行了,评论组件我们之前已经封装了,直接调用组件即可
打卡,商品购买模块功能大致完成(包括商品列表和商品的详细页面)- 添加商品到购物车,商品列表的页面绘制和商品详情的页面绘制
- 通过localStorage将购物车保存到本地持久化
- 购物车页面的绘制并展示购物车数据,购物车商品的更改和删除
OK。项目大致功能完成(除某些小部件及会员和搜索板块),用时:45天 |
请发表评论