前言
很早之前就看见尤大在说
前段时间恰好在网上看见了相关的项目，好奇心又被调动了，想着也没什么事，也便在这个暑假跟着视频去尝试做了一下，在使用
话不多说了，直接来说开发项目时感受到的优点和自己在开发过程中遇见的一些问题
优点：
更简洁的代码
在vue3.2中，正式支持了
复制代码
不仅仅是组件的引入无需单独注册，包括函数与变量的声明也大大减少了代码量。使用
复制代码
项目接口更加详细
在该项目中，我所使用的是mock.js来写接口，通过import '@/mock/index'让接口跑起来。在实际项目中，我需要调用接口时，需要先用typescript进行接口定义,虽然这会在一定程度上增加代码量，但对于中大型项目来说会更便于维护，在调用接口的时候也会有代码提示，这也是ts的优势了。
代码示例如下：
复制代码
当我们将鼠标放上去时，便会出现提示：
，这极大的方便了我们对接口的调用和后期的维护，对ts中的详细教程可以看这篇文章，可以更深入的了解interface
项目开发过程遇见的问题
路由无法跳转
这里犯的错误其实还是因为自己对
翻看vue-router官方文档，其实可以很清楚的看见官方对此的解释：
由于setup执行时机在beforeCreate之前，故在setup中是不能使用data和methods(因为还没初始化好)。由于不能再setup函数中使用data和methods,所以Vue为了避免我们错误的使用,它直接将setup函数中的this修改成undefined.
但由于本项目中的搜索图标是标签，所以也就没必要使用useRouter函数了，直接在标签上进行添加即可：
注意，由于我们是默认路由hash,故此处不可以直接添加为/search，否则不会进行页面的跳转，应在前面再添加一个#
无法修改组件样式
无法修改组件样式的情况在之前的项目中也遇见过，element plus组件默认的样式无法修改，在vant3中也遇见了同样的问题，我们自己写的样式被覆盖，这里就直接进行样式穿透即可，使用方法： ::deep 想要修改类名 { 修改样式 }：
CSS module
在我对登录界面进行样式修改的时候出现了问题，我无法将整体的页面背景修改成灰色，我通过对body的样式修改，发现不起作用，如果直接删除vue单文件组件的
这时候便有两个解决方法：
单独再开一个style
通过再开一个
使用全局作用域
CSS Modules 允许使用:global(.className)的语法，声明一个全局规则
关于CSS Moudles的详细情况可以参考阮一峰老师的这篇文章：CSS Modules 用法教程
defineExpose
在使用vant3组件的时候，由于他的文档实例并未像element plus一样直接用的
结果我登录界面的输入框全都不见了.... 一想便知道，估计又是setup语法糖没把握好的锅，连忙去翻看vue官方文档，不出意外的找到了问题的原因：事实上，获取到组件的公开实例的，需要用到definExpose
使用
通过 defineExpose 编译器宏来显式指定在
注意，definExpose是需要手动导入的
总结
