vue 单文件组件实现
Vue 单文件组件实现
Vue 单文件组件（Single File Components，SFC）是 Vue.js 的核心特性之一，允许将模板、逻辑和样式封装在一个文件中。以下是实现单文件组件的关键步骤。
文件结构
单文件组件通常以 .vue 为扩展名，包含三个部分：
<template>：定义组件的 HTML 模板。<script>：定义组件的 JavaScript 逻辑。<style>：定义组件的 CSS 样式。
<template>
<div class="example">{{ msg }}</div>
</template>
<script>
export default {
data() {
return {
msg: 'Hello Vue!'
}
}
}
</script>
<style scoped>
.example {
color: red;
}
</style>工具链支持
单文件组件需要构建工具（如 Vite 或 Webpack）配合 @vue/compiler-sfc 进行编译：
- Vite：开箱即支持
.vue文件，无需额外配置。 - Webpack：需配置
vue-loader插件。
# 使用 Vite 创建 Vue 项目
npm create vite@latest my-vue-app --template vue核心特性
- Scoped CSS：通过
<style scoped>实现样式局部作用域。 - CSS 预处理器：支持
<style lang="scss">或<style lang="less">。 - 组合式 API：可在
<script setup>中使用组合式 API 语法糖。
<script setup>
import { ref } from 'vue'
const count = ref(0)
</script>模块化与复用
- 通过
import导入其他组件。 - 使用
export default导出组件选项或逻辑。
<script>
import ChildComponent from './ChildComponent.vue'
export default {
components: { ChildComponent }
}
</script>注意事项
- 确保开发环境安装了
@vitejs/plugin-vue或vue-loader。 - 样式作用域冲突时，优先使用
scoped或 CSS Modules。 - 复杂逻辑建议拆分为独立模块，通过
import引入。
通过以上方式，可以高效实现 Vue 单文件组件的开发与维护。
