.vue是什么文件

崎山小鹿

.vue 文件是 Vue.js 框架中使用的单文件组件（Single-File Component，SFC）文件。它是 Vue 开发中最核心、最常见的文件类型。

基本结构
一个 .vue 文件通常包含三个顶层块：

vue
<template>
  <!-- HTML 模板：定义组件的结构 -->
  <div class="hello">{{ message }}</div>
</template>

<script>
// JavaScript 逻辑：定义数据、方法、生命周期等
export default {
  data() {
    return { message: 'Hello Vue!' }
  }
}
</script>

<style scoped>
/* CSS 样式：scoped 表示样式只作用于当前组件 */
.hello {
  color: blue;
}
</style>
各块的作用
块        作用
<template>        组件的 HTML 结构（模板）
<script>        组件的逻辑（数据、方法、生命周期钩子等）
<style>        组件的样式，加 scoped 可限定作用域
<script setup>        Vue 3 的组合式 API 写法，更简洁
自定义块        如 <i18n>、<docs> 等，供插件使用
特点
一个文件封装一个组件：模板、逻辑、样式放在一起，便于维护。

需要构建工具编译：浏览器不能直接识别 .vue 文件，需通过 Vite、Webpack 等工具配合 vue-loader / @vitejs/plugin-vue 编译成普通 JS。

支持预处理器：可在 <style lang="scss">、<script lang="ts"> 中指定语言。