用微信扫码二维码

分享至好友和朋友圈

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

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

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

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

1 创建app.vue文件

2 在vscode中安装vue的开发插件

Vue Language Features (Volar)

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

3 vite安装vue编译插件

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

5 单文件结构示例代码：

特别声明：以上内容(如有图片或视频亦包括在内)为自媒体平台“网易号”用户上传并发布，本平台仅提供信息存储服务。

Notice: The content above (including the pictures and videos if any) is uploaded and posted by a user of NetEase Hao, which is a social media platform and only provides information storage services.