# html-vue-setup **Repository Path**: Tofu_Xx/html-vue-setup ## Basic Information - **Project Name**: html-vue-setup - **Description**: 您可以在html中使用类似vue3 setup语法糖的格式 - **Primary Language**: Unknown - **License**: MIT - **Default Branch**: main - **Homepage**: None - **GVP Project**: No ## Statistics - **Stars**: 0 - **Forks**: 0 - **Created**: 2024-08-09 - **Last Updated**: 2024-11-04 ## Categories & Tags **Categories**: Uncategorized **Tags**: None ## README

html-vue-setup

❗本项目停止维护，建议使用setupin代替本项目❗

❗本项目停止维护，建议使用setupin代替本项目❗

❗本项目停止维护，建议使用setupin代替本项目❗

## 什么是html-vue-setup html-vue-setup 是一个用于在 HTML 中使用 Vue 3 的工具。它允许你在 HTML 文件中直接使用类似 Vue 3 setup 语法糖的语法 ## 快速上手 1. **必须**先在 HTML 文件中引入 [Vue3](https://cn.vuejs.org/) 的 CDN 链接 ```html ``` 2. 在 HTML 文件中引入 html-vue-setup ```html ``` 3. 在 HTML 文件中使用 setup 语法糖 ```html ``` ## 前后对比 1. 不使用 html-vue-setup 时 ```html ``` 2. 使用 html-vue-setup 后，爽 ```html ``` ## 基本特性 ### 1.挂载位置 1. 默认挂载 > 默认挂载到#app上 _(id为app的元素)_ 若没有则挂载到body下的第一个元素上 所以你可以这样写 ```html
{{ count }}
``` 浏览器会自动将`
`标签解析到``下 > 这种写法是为了更接近vue的SFC格式，也是本人的习惯写法 2. 自定义挂载 ```html ``` ### 2.暴露数据 setup函数中需要手动return需要暴露的数据，这个十分影响开发体验。 而html-vue-setup会自动return setup函数中定义的变量 > _暂不支持命名解构_ ```html
{{ count }}
``` ### 2.自动导入 1. 不使用 html-vue-setup 时，我们需要手动解构 Vue 3 的函数，或者都带上 Vue 前缀 ```html ``` 2. 使用 html-vue-setup 后，我们可以直接使用 ```html ``` ## 书写顺序 vue3三更建议 `
{{ count }}
``` ## 更多示例 [示例](https://github.com/Tofu-Xx/html-vue-setup/tree/main/test)