今天给大家分享一个电商网站的实战项目,有源码可以下载哈,如图:
页面效果长啥样呢?如图:
除了这个轮播图外,还有一个商品列表:
这个项目的源码是基于《Vue.js 从入门到项目实战》这本书中的案例改编过来的,感谢这本书的作者。
项目的目录结构如下:
大家从目录就可以看出来,是基于Vite4和Vue3开发的,全部采用全新的Setup语法。
这里面最有意思的就是这个自定义的轮播图组件来,知识点非常丰富,涉及到如何接收外部属性:
如何自定义v-model等等:
还有在Vue3中计算属性是如何使用的:
知识点非常的多,整个内容我已经整理成了一篇非常详细的文档,文档有PDF版本哦,文档的大纲如下:
为了便于代码的管理,整体还采用来css和template分离开发的方式,不过js的逻辑代码和template的代码是在一个Vue文件里面的。
领取专属 10元无门槛券
私享最新 技术干货