SpringBoot3＋Vue3电商网站项目实战01 首页开发

今天给大家分享一个电商网站的实战项目，有源码可以下载哈，如图：

页面效果长啥样呢？如图：

除了这个轮播图外，还有一个商品列表：

这个项目的源码是基于《Vue.js 从入门到项目实战》这本书中的案例改编过来的，感谢这本书的作者。

项目的目录结构如下：

大家从目录就可以看出来，是基于Vite4和Vue3开发的，全部采用全新的Setup语法。

这里面最有意思的就是这个自定义的轮播图组件来，知识点非常丰富，涉及到如何接收外部属性：

如何自定义v-model等等：

还有在Vue3中计算属性是如何使用的：

知识点非常的多，整个内容我已经整理成了一篇非常详细的文档，文档有PDF版本哦，文档的大纲如下：

为了便于代码的管理，整体还采用来css和template分离开发的方式，不过js的逻辑代码和template的代码是在一个Vue文件里面的。