如有错误，烦请指正~
目录
一、什么是单页面应用程序
二、使用工具：node.js
三、工具链
易错点
一、什么是单页面应用程序
多个组件（例如登录、注册等以vue结尾的都叫做组件）在一个页面显示，叫单页面应用程序SPA。通过css和JavaScript来控制多个组件在一个页面显示，这是原理知道即可，不需要清楚做法。
二、使用工具：node.js
node.js工具：解析执行Javascript代码。
npm:包管理工具，在node.js中自带，（后端的maven）
所以需要下载该软件，LTS表示长期支持版本，所以建议下载后面有LTS的，初次之外，也要注意，对于初学者来说，最好不要用最新版本，因为后面想要学习项目的时候可能会冲突。
按照上面的要求下载一个版本即可，我安装的是：v20.14.0。
安装成功之后，到终端先查看一下下载的node版本和npm版本，然后使用
pm install express -g //-g表示全局安装，用于全局安装 Node.js 的 web 框架 Express这个是常用到的，所以这里用这个命令测试一下 是否能正常使用。
三、工具链
项目脚手架：相当于项目的模板。
vite和Vue CLI是两种脚手架。这里用vite演示：
在终端使用下面的命令进行创建新项目：
npm create vue@latest创建过程中选择如下：
其中的倒数第二个是否引入ESLint用于代码质量检测不建议选“是”，因为这个检测对于空格等的都会检查，很麻烦。
回到vscode执行上述的项目：
里面的是项目所需要的包，在vscode的终端输入：
npm install下载所需要的包，下载完成之后如下：
然后就可以运行该项目了：
然后复制上面给出的代码，然后就可以看到相应的项目界面了：
项目解释：
node_modules：使用的包
src:写代码的地方
放资源的地方。
组件里面可以套组件，叫做子组件。
单独安装路由：安装 | Vue Router (vuejs.org)
但是在安装包的时候，其实默认情况下就安装了，上面这个是没安装的补救方法。
简单了解之后，尝试修改项目里的内容，下面进行一个简单的修改，在当前的项目界面的About后面再添加三个，分别为首页、购物车和订单，在点击这几个的时候，会简单的显示一些内容：
修改的步骤实质上就三部分内容，分别是
1、在App.vue中添加三个内容：
这个显示在：
因为修改的是路由里的内容，所以需要先查看router里的内容，可以发现，对于前面中路由中提到的，均有一个.vue文件，所以
2、创建3个与路由对应的.vue文件，里面的内容随机写：
3、在router下的文件中添加相应的内容：
然后，就可以在浏览器进行查看了：
响应式状态：响应式基础 | Vue.js (vuejs.org)
当其中一个地方的某个值（例如a）修改了，其他地方也会感应到，也会修改这个值(a)。
例：
<script lang="js" setup> //加上setup和后面的一句话就表示响应式import { ref } from 'vue'//下面是当前组件的属性和方法const username=ref('li') function changeName(){username.value='zhang' //这里不能用this???为什么}const chaName = () => username.value = 'QQ'; // 箭头函数，与上面的函数等价
</script>嵌套路由：
嵌套路由 | Vue Router (vuejs.org)
components:组件中的组件。
就是上述的这种方式，这里就先不添加了。
易错点
- ref需要随时改变的时候就需要加，所以不需要随时改的话就不用写
- 有路由就要有路由出口