vue 单文件组件实现
Vue 单文件组件的实现
Vue 单文件组件（Single File Components，SFC）是 Vue.js 的核心特性之一，允许将模板、逻辑和样式封装在一个文件中。以下是实现 SFC 的详细方法：
文件结构与基本语法
一个典型的 Vue 单文件组件由三部分组成：
<template>：包含组件的 HTML 模板<script>：包含组件的 JavaScript 逻辑<style>：包含组件的 CSS 样式
<template>
<div class="example">{{ msg }}</div>
</template>
<script>
export default {
data() {
return {
msg: 'Hello Vue!'
}
}
}
</script>
<style>
.example {
color: red;
}
</style>使用构建工具配置
Vue SFC 需要构建工具（如 Vite 或 Webpack）处理：
-
安装 Vue 编译器
npm install @vue/compiler-sfc -D -
Vite 配置示例（vite.config.js）
import { defineConfig } from 'vite' import vue from '@vitejs/plugin-vue'
export default defineConfig({ plugins: [vue()] })
3. Webpack 配置示例
需要 vue-loader：
```javascript
const { VueLoaderPlugin } = require('vue-loader')
module.exports = {
module: {
rules: [
{
test: /\.vue$/,
loader: 'vue-loader'
}
]
},
plugins: [new VueLoaderPlugin()]
}组件注册与使用
- 全局注册
import { createApp } from 'vue' import App from './App.vue' import MyComponent from './components/MyComponent.vue'
const app = createApp(App) app.component('my-component', MyComponent) app.mount('#app')
2. 局部注册
```vue
<script>
import ChildComponent from './ChildComponent.vue'
export default {
components: {
ChildComponent
}
}
</script>高级特性
-
使用
<script setup>语法糖
<script setup> const msg = 'Hello Vue 3!' </script> -
CSS 作用域
<style scoped> .example { /* 仅作用于当前组件 */ } </style> -
自定义块
<custom-block> 这可以是文档或其他自定义内容 </custom-block>
TypeScript 支持
- 为 SFC 添加 TypeScript
<script lang="ts"> import { defineComponent } from 'vue'
export default defineComponent({ data() { return { count: 0 } } })
```- 使用
<script setup>与 TS<script setup lang="ts"> const count = ref<number>(0) </script>
预处理器支持
可以在 SFC 中使用各种预处理器：
<style lang="scss">
/* SCSS 语法 */
</style>
<script lang="ts">
/* TypeScript 语法 */
</script>
<template lang="pug">
div.example {{ msg }}
</template>
