❗本项目停止维护，建议使用setupin代替本项目❗
❗本项目停止维护，建议使用setupin代替本项目❗
❗本项目停止维护，建议使用setupin代替本项目❗
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 时
<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>下
这种写法是为了更接近vue的SFC格式，也是本人的习惯写法
- 自定义挂载
<script setup="#my-app">
const count = ref(0)
</script>setup函数中需要手动return需要暴露的数据，这个十分影响开发体验。 而html-vue-setup会自动return setup函数中定义的变量
暂不支持命名解构
<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 后，我们可以直接使用
<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>