简介
这是一系列关于如何用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团队）
联系客服
