实现.vue文件
创建Vue单文件组件
Vue单文件组件（.vue文件）是Vue.js框架的核心特性之一，它将模板、脚本和样式封装在一个文件中。一个典型的.vue文件结构包含三个部分：<template>、<script>和<style>。
<template>
<div class="example">
{{ message }}
</div>
</template>
<script>
export default {
data() {
return {
message: 'Hello Vue!'
}
}
}
</script>
<style scoped>
.example {
color: red;
}
</style>配置开发环境
使用Vue单文件组件需要配置构建工具。Vue CLI是官方推荐的脚手架工具，可以快速搭建Vue项目环境。
安装Vue CLI：
npm install -g @vue/cli创建新项目：
vue create my-project组件基本结构
<template>部分包含组件的HTML模板，必须有一个根元素。模板中可以使用Vue的指令和插值语法。
<script>部分包含组件的JavaScript代码。通常导出一个Vue组件选项对象，包含data、methods、props等选项。
<style>部分包含组件的CSS样式。添加scoped属性可以使样式只作用于当前组件。
使用组件
在其他组件中使用自定义组件需要先导入并注册：
<template>
<div>
<ExampleComponent />
</div>
</template>
<script>
import ExampleComponent from './ExampleComponent.vue'
export default {
components: {
ExampleComponent
}
}
</script>添加TypeScript支持
Vue 3对TypeScript有更好的支持。要使用TypeScript，可以修改<script>标签：
<script lang="ts">
import { defineComponent } from 'vue'
export default defineComponent({
data() {
return {
message: 'Hello Vue with TS!'
}
}
})
</script>单文件组件高级特性
Vue单文件组件支持许多高级特性：
- 使用
<script setup>语法糖简化组合式API代码 - 使用CSS预处理器如Sass/SCSS、Less
- 自定义块处理文档或其他特定需求
- 热重载开发体验
构建与打包
Vue单文件组件需要构建工具处理。Vue CLI内部使用webpack，也可以配置使用Vite等现代构建工具。构建后的组件会被编译为标准JavaScript代码，可在浏览器中运行。
构建生产版本：
npm run build
