想要了解更多项目中倚赖包的详细用法，可通过npm官网并输入包名查看其官方文档
推荐使用的 IDE 是 VS Code，配合 Vue - Official 扩展 (之前是 Volar)。该插件提供了语法高亮、TypeScript 支持，以及模板内表达式与组件 props 的智能提示。
TIP：Vue - Official 取代了之前为 Vue 2 提供的官方 VS Code 扩展 Vetur。如果你之前已经安装了 Vetur，请确保在 Vue 3 的项目中禁用它。
Vue官网都这么说了，你还不用吗😏
- 为了更好的开发体验，请务必安装项目推荐的插件，打开项目会自动提示安装。详情见 .vscode/extensions.json
- 为保存项目目录清爽，部分不经常打开的文件可以隐藏。详情见 .vscode/settings.json的files.exclude
- 大部分项目都不需要vue-router，推荐根据情况自己删除该部分内容
- node > 20
为什么？pnpm 是凭什么对 npm 和 yarn 降维打击的
pnpm install
git add .
git commit -m 'init'
pnpm dev创建一个git仓库是必要的。通过Husky+lint-staged+commitlint的使用可以提高项目团队的工作效率，确保代码库中的代码符合特定的质量标准。
husky 是一个用于简化Git钩子（hooks）的设置的工具，允许开发者轻松地在各种Git事件触发时运行脚本。例如，在提交之前（pre-commit）、推送之前（pre-push）、或者在提交信息被写入后（commit-msg）等。
lint-staged 是一个在提交代码之前运行linter或其他工具的工具。这意味着当开发人员尝试提交代码到版本控制系统（如git）时，lint-staged 会只对暂存区（staged files）的文件运行配置的命令，这通常是代码风格检查器（如ESLint、Prettier）、代码格式化工具或测试套件。
使用lint-staged可以确保只有符合项目规定代码质量标准的代码被提交，减少了不必要的错误和风格问题被引入代码库的可能性。
用于检测
git提交的message是否符合规范，如果不符合规范则提交失败。相关说明可以在commitlint.config.mjs文件中查看。提交信息举例：feat: 添加登录功能
模板采用eslint9以及antfu的方案：@antfu/eslint-config进行配置。保存时会自动格式化。另外可以通过pnpm lint:fix对全部可格式化文件进行格式化。另外，建议文件夹命名和文件命名都采用kebab-case方式（即各个单词之间通过-组合起来）
stylelint为css的lint工具。可格式化css代码，检查css语法错误与不合理的写法，指定css书写顺序等...
例如：当我们编写以下代码会报错。
鼠标移入查看
提示我们justify-content: center;应该在display: flex;前面，这个时候我们直接ctrl+s保存，stylelint就可以自动帮我们格式化为正确的格式了。另外可以通过pnpm lint:stylelint对全部可格式化文件进行格式化。
网上很多人说千万别用😧，用了就回不去啦😮。那原子化CSS的优势在哪儿呢？
-
不用想类名！相信很多人在编写样式类的时候经常会纠结类名，原子化提供的类名都是能够一眼就能知道大概意思又比直接编写style更加简洁
-
”无需离开您的HTML，即可快速建立现代网站，确实，对于现在组件化开发的方式来说，单个组件文件相比以前一个html对应一个页面来说代码量要小很多，可能就几行html的组件代码，直接在html中编写样式是个更好的选择
-
利用原子化框架提供的预设原子类，极大地提高开发效率，将更多时间用在页面构造而不是重复地编写相似的代码
-
IDE支持，VS Code 的unocss 智能提示扩展涵盖了所有的类。在编辑器内既可得到智能的自动完成建议、提示及类定义等功能，而且无需配置。
你可能没听过unocss，但你肯定听过tailwindcss，那为什么选择unocss而不是tailwindcss呢？
具体如何使用大家可以花一丢丢时间到官网查看，这里分享一下很方便的插件unot：支持将css直接通过快捷键 Mac ? cmd+alt+v : ctrl+alt+v 自动转换成unocss。例如我复制了width: 10px;，光标在元素的class中时按下快捷键会生成w-[10px]的unocss的class名。
另外，在网上看见有的人说这样没有了class类名，css都写在标签上面会导致后期维护困难，找不到页面中元素对应代码中的位置。刚好，vue-devtools弥补了这点
这个东西可以让你点击页面中元素后，自动在vscode中找到你当前点击的元素对应代码位置，并在vscode中打开该文件，并把光标放在当前元素的位置。实在是太贴心了。
图标方案大家可以看看这篇文章，这个来自 UnoCSS 的图标解决方案，或者能为你提供灵感，用于你自己的项目。当然，这个模板就是使用的这个方案。
如何使用：
-
在图标网站上需找自己想要的图标（已有超过200,000的图标，太可怕了🥵）
-
-
注意有一个前缀 i- 需要拼接到复制的类名前，然后就可以通过设置该div的宽高和字体颜色控制图标样式了
<div class="i-svg-spinners:blocks-scale h-50 w-50 text-[#18a058]"></div>
简直是太太太简便了🤯，如果你安装了模板推荐的插件，还可以直接在vscode中得到这样的效果，这不爽死了吗😵
模板使用到了两个动画相关的库：@vueuse/motion，@formkit/auto-animate，用最少的代码让页面动起来。具体可以查看模板中src/views/home/index.vue文件，只使用了v-auto-animate，v-motion-slide-bottom，v-motion-slide-top三个指令，没有任何其它污染业务代码的东西。
