快速上手Vue,直接在 HTML 中玩转 Vue <script setup>吧！

前言

在初学vue时，大家是否总是被各种构建问题所困，导致无法专注于vue自身的语法学习。
即使后来我熟悉了工程化开发，但如果突然冒出一个小点子，也还是倾向于将html 引入 vue，省去构建步骤。
或者是想快速尝试vue某些新功能，又或写一个很小的页面时，也是直接在html引入vue CDN来的爽快。

缺憾

虽然vue有cdn可以直接引入html，但是肯定没有vue sfc写起来舒服。
特别是vue 3.2推出了<script setup>后，我在用html写vue时用不了就特别心痒痒。🥵
所以我开始寻找在html中写<script setup>的方法，并没有找到相关工具。

可以在html中用script setup吗?

甚至直接得到否定答案，那只能自己写了。

正文

ok，步入正题，我将要为你介绍的是 setupin ，setup in html!

我们码上见

• 需要编译的vue <script setup>

• 利用setupin 的 html

简直一模一样好吧！
用setupin你甚至可以省去import。

• 如果你会<script setup> ，那么你应该看出来了，没有任何学习成本，直接用。
• 如果你在学习vue，那么你可以用这个工具在html快速学习vue最新语法。

• 如果你纯路人，那么感谢你能看到这里🤪

  使用

  如上直接引入cdn就可以使用

  <script src="https://unpkg.com/setupin"></script>

  或者用 stackblitz 在线体验，体验地址：https://stackblitz.com/edit/setupin?file=index.html

其实一个cdn能解决的用不上stackblitz吧🤓
感兴趣的话可以看我 源码

结语

有问题或建议请给我留言或提issues哦
给我的项目仓库点个星星支持一下吧😘😘😘

相关链接

github仓库: https://github.com/tofu-xx/setupin
gitee仓库: https://gitee.com/tofu_xx/setupin