实现.vue文件

创建.vue文件的基本结构

.vue文件是Vue.js单文件组件（SFC）的标准格式，包含模板、脚本和样式三部分。以下是一个基本结构示例：

<template>
  <div class="example">
    {{ message }}
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello Vue!'
    }
  }
}
</script>

<style scoped>
.example {
  color: red;
}
</style>

模板部分

模板部分使用HTML语法，包含组件的DOM结构。Vue的模板语法支持数据绑定、指令等特性：

<template>
  <div>
    <p v-if="showText">{{ textContent }}</p>
    <button @click="toggleText">Toggle</button>
  </div>
</template>

脚本部分

脚本部分定义组件的逻辑，可以使用Options API或Composition API：

Options API示例：

<script>
export default {
  data() {
    return {
      count: 0
    }
  },
  methods: {
    increment() {
      this.count++
    }
  }
}
</script>

Composition API示例：

<script setup>
import { ref } from 'vue'

const count = ref(0)
function increment() {
  count.value++
}
</script>

样式部分

样式部分支持CSS预处理器，可以通过scoped属性实现组件作用域的CSS：

<style scoped>
.button {
  background-color: #42b983;
}
</style>

使用预处理器

.vue文件支持各种CSS和JavaScript预处理器，只需添加lang属性：

<template>
  <!-- 模板内容 -->
</template>

<script lang="ts">
// TypeScript代码
</script>

<style lang="scss">
// SCSS样式
</style>

组件导入与导出

.vue文件可以通过import/export与其他组件或模块交互：

<script>
import ChildComponent from './ChildComponent.vue'

export default {
  components: {
    ChildComponent
  }
}
</script>

自定义块

.vue文件支持自定义块，用于文档、测试等特定用途：

<template>
  <!-- 模板内容 -->
</template>

<docs>
这里是组件文档说明
</docs>

构建配置

要使.vue文件正常工作，需要在项目中配置Vue loader：

// webpack.config.js
module.exports = {
  module: {
    rules: [
      {
        test: /\.vue$/,
        loader: 'vue-loader'
      }
    ]
  }
}