在vue3中，template模版中的html代码，并不能直接在网页中执行，而是会在项目运行时，在浏览器中被编译为js 的函数去执行。

问题：在template模版中写html，体验很差，智能提示都不能用。

解决：使用vue的单文件组件。vue中的单文件组件，后缀是.vue

(资料图片仅供参考)

单文件组件使用方法

vue文件本身并不能被浏览器识别，必须要通过构建工具打包编译以后使用。

1 创建app.vue文件

2 在vscode中安装vue的开发插件Vue Language Features (Volar)

可以在我们写代码的过程中有高亮显示和智能提示

3 vite安装vue编译插件

yarn add -D @vitejs/plugin-vue

4 创建配置文件：vite.config.js

5 单文件结构示例代码：

编译：yarn dev即可通过vue单文件组件实现页面效果。

关键词：