HTML文件当做Vue文件写，直接运行于浏览器，省去构建步骤！_html中直接使用vue怎么使用setup-优快云博客

本文链接：https://blog.youkuaiyun.com/xlw12345432/article/details/142931268

Hi 🙌

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

可以在html中用script setup吗?

正文

于是我制作了这个工具： setupin ，setup in html!

logo

我们码上见

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>setupin</title>
  <script src="https://unpkg.com/setupin"></script>
</head>

<script setup>
  import { ref } from 'vue'
  const count = ref(0)
</script>

<template>
  <button @click="count++">{{ count }}</button>
</template>

<style>
  button {
    font-size: larger;
  }
</style>

除了head标签外，你完全可以把它当做Vue文件去书写。

如果你觉得还不错，可以star支持一下 🫶

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

使用

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

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

HTML文件当做Vue文件写，直接运行于浏览器，省去构建步骤！

Hi 🙌

可以在html中用script setup吗?

正文

我们码上见

使用

bye~ 👋