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团队）

---

微信号：算法与编程之美