vue的学习--day2

news2025/1/4 19:44:02

如有错误，烦请指正~

一、什么是单页面应用程序

二、使用工具：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:组件中的组件。