简介
这是一系列关于如何用vue编写微商城项目的教程文档,适合观看对象:已经学完vue基础的读者。教程基于vue2.x、vue-cli4.x、vant-ui等框架,代码简单易懂,对于难点知识由浅入深,是入门项目开发的不二文档。
涉及知识点
1.vue项目创建.
2.vue基础知识,如slot、v-for等等.
3.组件封装,如导航栏、商品卡片等.
4.vuex、axios、vue-router的基本使用.
5.better-scroll的使用,实现内容滚动、索引列表.
6.flex布局.
7.第三方框架的使用,如vant-ui.
最终页面效果
1.首页
2.新闻资讯页
3.商品购买页
4.商品详情页
5.购物车页面
6.分类页面
知识点前瞻
一部分知识点的基本介绍没有写在文章内,这里单独提出来,建议提前阅读。
better-scroll介绍及使用
介绍
better-scroll是针对移动端设计的滚动内容插件。在桌面网页中用户通过滑动鼠标中轮即可实现页面或者内容的滚动,但这样的体验对移动端并不友好.而且开发者根据原生滚动来监听制作一些高级功能是比较复杂的,better-scroll提供了滚动内容开发的高级接口,方便开发者使用.
使用
1.给定父元素固定高度并用 overflow:hidden; 隐藏超出父元素的内容
2.在子元素内容渲染完成后,将父元素初始化为better-scroll对象
3.当子元素(这里的父元素只能有一个子元素)高度大于父元素高度时,父元素内可进行滚动
实战-索引列表
见文章《八、分类》
详细介绍
better-scroll的详细介绍可以自行百度,但其官方文档已经停止维护,可能无法查阅,可以看其他人写的博文.
flex布局-简单使用
介绍一种快速、简单的布局方式.
使用
给父元素添加 display:flex; css属性,给子元素添加 flex:1; css属性。这意味着这个子元素的宽将占据父元素的 1/n ,n是所有子元素flex属性值的和。图示如下:
扩展
flex布局简单强大,包含水平居中、垂直居中、子元素等间隔设置等等,可以自行百度flex布局。
本篇文章是该系列文章中的第一篇,主要为大家介绍了创建项目所需要用到的知识和有关better-scroll介绍及使用。对本系列文章感兴趣的朋友千万不要错过哦,下一篇系列文章小编正在认真打造,请各位耐心等待!
主编:王楠岚
责编 :木有符号
能力越强,责任越大。
实事求是,严谨细致。
(where2go团队)
联系客服