白洞，白色的明天在等着我们

本系列将以自助点餐页面为模板，搭建一款自助点餐系统，第一次开发移动端h5项目，免不了有所差错和不足，欢迎各位大佬指正。 本章我们将继续开发，主要设计商品和购物车的逻辑和页面。我设计每个大类的菜单为menu，菜单内的子项目为good，将其放在utils/interface/index.ts下方便维护管理，如下其中image_pth传的是商品主图，传图像的路径，我们暂时使用的就是静态路径，后面搭建好node后可以传图像的base64，下面是一个具体的例子：当然后续我将把这个menu和goods都设计为动态的

Prettier 是一个 Opinionated 的代码格式化工具，它通过解析代码并使用自己的规则（考虑最大行长）重新打印代码，从而使得代码样式一致，并在必要时包装代码。一致的代码风格不仅仅有助于提高可读性，还可以减少错误和漏洞的产生。在编码中，在VSCode中配置Prettier插件并实现使用Ctrl+S自动格式化代码

H5 项目基于 Web 技术，可以在智能手机、平板电脑等移动设备上的浏览器中运行，无需下载和安装任何应用程序，且H5 项目的代码和资源可以集中在服务器端进行管理，只需更新服务器上的代码，即可让所有顾客访问到最新的系统版本。本系列将以肯德基自助点餐页面为模板，搭建一款自助点餐系统，第一次开发移动端h5项目，免不了有所差错和不足，欢迎各位大佬指正。项目代码正在gitee同步更新中，项目地址：https://gitee.com/airheaven/kfg-vue，学习前请大家给个star哦。

H5 项目基于 Web 技术，可以在智能手机、平板电脑等移动设备上的浏览器中运行，无需下载和安装任何应用程序，且H5 项目的代码和资源可以集中在服务器端进行管理，只需更新服务器上的代码，即可让所有顾客访问到最新的系统版本。本系列将以肯德基自助点餐页面为模板，搭建一款自助点餐系统，第一次开发移动端h5项目，免不了有所差错和不足，欢迎各位大佬指正。Vue3.2 + Vite + TS + Vant + Pinia + Node.js + MongoDB

是一个用于Rollup构建工具的插件，它可以生成可视化的构建报告，帮助开发者更好地了解构建过程中的文件大小、依赖关系等信息。使用插件，可以在构建完成后生成一个交互式的HTML报告，其中包含了构建过程中的各种统计信息，如文件大小、依赖关系、模块数量等。它提供了多种模式的依赖分析，包括直观的视图分析，sunburst（循环层次图，像光谱）、treemap（矩形层次图，看起来比较直观，也是默认参数）、network（网格图，查看包含关系）、raw-data（原数据模式，json格式）, list(列表模式),

首先我们进入TRTC的控制台 https://console.cloud.tencent.com/trtc，可以看到腾讯云为我们提供了：免费的10000分钟音视频套餐包供我们开发使用，已经足够我们随意使用了！

在学习和开发中，我们常常需要写一些固定的内容，但是不希望重复去写，这个时候就可以提前在VSCode中自定义好用户片段，将代码模板定义好，然后每次需要用的时候，输入字符VSCode就能自动为我们创建好，非常简单便捷。

一、环境、工具jdk16.0.2java 11SpringBootMybatisjdkMavenmysql二、搭建后台spring-boot框架首先创建新项目，点击new- project，选择Spring Initializr next...

v-model 指令用来在 input、select、textarea、checkbox、radio 等表单控件元素上创建双向数据绑定，根据表单上的值，自动更新绑定的元素的值，在表单中，我们同样可以用到v-model来进行数据的绑定。

computed和watch的区别主要有：是否调用return、使用场景、是否调用缓存。computed和methods区别主要有：计算属性（computed）在系统刚运行的时候调用一次，之后只要值不改变，dom中的值不再去调用函数取值，而是从缓存中获取，速度会很快。而方法选项methods仅仅刚加载时调用一次，不管值有没有改变，一旦dom中要取值，则会再次调用方法

组件可以扩展 HTML 元素，封装可重用的代码。组件系统让我们可以用独立可复用的小组件来构建大型应用

在Vue3中，使用v-for需要制定key值，为了给 Vue 一个提示，以便它能跟踪每个节点的身份，从而重用和重新排序现有元素，你需要为每项提供一个唯一 key。建议尽可能在使用 v-for 时提供 key

上一章节我们学习了Vue的项目结构，怎样用Vue3进行开发，本章我们将学习Vue的基本语法，着重学习如何编写代码Vue.js 使用了基于 HTML 的模板语法，允许开发者声明式地将 DOM 绑定至底层组件实例的数据。所有 Vue.js 的模板都是合法的 HTML，所以能被遵循规范的浏览器和 HTML 解析器解析。Vue 的核心是一个允许你采用简洁的模板语法来声明式的将数据渲染进 DOM 的系统。结合响应系统，在应用状态改变时， Vue 能够智能地计算出重新渲染组件的最小代价.

上一章学习了Vue是什么，怎样配置安装和运行Vue3，这篇将着重介绍Vue的项目结构以及如何使用VSCode+Vue来进行开发。

Vue 是一套用于构建用户界面的渐进式框架，与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。