html-vue-setup 是一个用于在 HTML 中使用 Vue 3 的工具。它允许你在 HTML 文件中直接使用类似 Vue 3 setup 语法糖的语法
- 必须先在 HTML 文件中引入 Vue3 的 CDN 链接
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>- 在 HTML 文件中引入 html-vue-setup
<script src="https://unpkg.com/html-vue-setup/dist/main.umd.js"></script>- 在 HTML 文件中使用 setup 语法糖
<script setup>
const count = ref(0)
</script>- 不使用 html-vue-setup 时，我们需要手动调用 createApp 函数，并传入一个对象，然后在对象中定义 setup 函数,并返回需要暴露的数据
<script>
const { createApp } = Vue;
createApp({
setup: () => {
/* 您的代码逻辑 */
return {
/* 需要暴露的数据 */
};
}
}).mount('#app');
</script>- 使用 html-vue-setup 后，爽
<script setup>
/* 您的代码逻辑 */
</script>- 默认挂载
默认挂载到#app上 (id为app的元素) 若没有则挂载到body下的第一个元素上
所以你可以这样写
<script setup>
const count = ref(0)
</script>
<main>
<div>{{ count }}</div>
</main>浏览器会将<main>标签挂载到<body>下
然后html-vue-setup会把vue实例挂载到<main>上
这种写法是为了更接近vue的SFC格式，也是本人的习惯写法，可能存在其他潜在问题
- 自定义挂载
<script setup="#my-app">
const count = ref(0)
</script>setup属性值最终会传参到mount函数中
setup函数中需要手动return需要暴露的数据，这个十分影响开发体验，所以html-vue-setup会自动将setup函数中定义的变量，自动return出去，不需要手动return
暂不支持命名解构
<script setup>
const count = ref(0)
</script>
<main>
<div>{{ count }}</div>
</main>- 不使用 html-vue-setup 时，我们需要手动解构 Vue 3 的函数，或者都带上 Vue 前缀
<script>
const { ref, createApp } = Vue;
createApp({
setup: () => {
const count = ref(0);
return {
count,
};
}
}).mount('#app');
</script>- 使用 html-vue-setup 后，我们可以直接使用，不需要手动解构，或者都带上 Vue 前缀
<script setup>
const count = ref(0)
</script>vue3三更建议 <script setup>写在<template>之前
所以html-vue-setup也支持了这种写法
<!-- 可以写在视图前面 -->
<script setup>
const count = ref(0)
</script>
<main>
<div>{{ count }}</div>
</main>