您现在的位置是：首页 >技术杂谈 >丁鹿学堂：前端进阶学习vue3最新教程之vue的单文件组件深入理解网站首页技术杂谈

在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

import { defineConfig } from 'vite'
import vue from "@vitejs/plugin-vue";
export default defineConfig({
    plugins: [vue()]
})

5 单文件结构示例代码：

<script>
 export default{
    data(){
        return {
            msg:'hello，vue'
        }
    }
 }
</script>
<template>
    <h1>{{msg}}</h1>
</template>

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