vue系列教程之微商城项目|项目介绍

简介 

这是一系列关于如何用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团队)


微信号:算法与编程之美

(0)

相关推荐