E.wall

Vue-H5-Template 项目以小商城作为基本的内容演示，使用 Vue3.0+Typescript+Vant 搭建 移动端h5页面 开发所需的基础模板，并提供一些通用型的解决方案及扩展功能。 .... 目录 components 下的所有公共组件使用 tsx 进行开发。 …

使用 svg-captcha 这个包并结合后端实现图形验证码功能。 在我们项目中安装 svg-captcha 包。 我们还可以进行一些简单的选项配置。 前端要做的工作很简单，获取后端的接口，后端返回一个 svg 的图片数据，将其显示在页面上即可。 所以我们使用uuid这个库来生…

首先观察者跟发布订阅这两者虽然看起来很相似，但是两者是有差异的，至少从实现方式上就有差异。 其次，虽然两者有差异，但是说发布订阅模式是观察者模式的变异也是ok的，因为它们思想上是一致的。 最后，做个类比，观察者模式类似于房东—租客，发布订阅模式类似于房东—中介—租客，本文将围绕…

就是缓存，我们还是来看看具体的使用场景。 首先简单一点，第一种比较普遍的场景，当我们从首页-->列表页-->商详页-->再返回，这时候列表页应该是需要keep-alive的。 然后第二种，当我们从首页-->列表页-->商详页-->返回到列表页(需要缓存)-->返回到首页(需要缓…

yapi就是一个接口管理平台了，顺带做些数据mock。 怎么用看yapi文档，官方文档还是讲的比较清晰的，我这里就以项目中使用了的来举几个列子。 登录注册一个账号以后，你可以创建一些分类，对接口分门别类，这样的话就比较清晰，也利于维护。 然后可以去新建一个接口，点击编辑什么的就…

在h5开发的过程中，轮播图下面放个类目的list（产品术语叫金刚区）是电商产品中很常见的布局，以前都是一行或两行排完，但是随着类目越来越多，出现了这么几种设计：1、最后一个类目为查看更多，点击跳转去一个新的页面；2、用swiper包裹，将多个类目当轮播图展示；3、类目scrol…

axios是什么就不说了吧，你应该以及很熟了，就直接安装吧。 然后我们简单的在src/utils/request.js中简单的进行了一下axios封装。 你也可以使用mockjs、esaymock之类的，其实都差不多，yapi还是很好用的，一些基础的用法文档都有讲，在项目中我用…

骨架屏就是可以由原来的在尚未加载前转圈圈变成先给用户展示出页面的大致结构，这样可以让用户有个更好的体验感。 就是直接麻烦设计切张图片，控制这张图片的隐藏和显示。 第2种就是使用饿了吗的page-skeleton-webpack-plugin这个插件。我在项目首页中用了一下，效果…

因为我们的项目中本来是使用sass来作为css的一个预编译器的，但是vant是用的less语法，所以我们还需要安装下less，不然会报错。 配置安装参考官网的引入组件教程就可以了。 如果你使用postcss-px-to-viewport来配置vw解决移动端适配解决方案，将vie…