实现.vue文件

创建.vue文件的基本结构

一个标准的.vue文件包含三个部分：模板（template）、脚本（script）和样式（style）。这种结构允许开发者在一个文件中管理组件的HTML、JavaScript和CSS。

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

<script>
export default {
  // JavaScript逻辑
}
</script>

<style>
/* CSS样式 */
</style>

模板部分

模板部分使用HTML语法，但通常包含Vue的模板语法，如指令和插值。模板必须有一个根元素。

<template>
  <div>
    <h1>{{ title }}</h1>
    <button @click="handleClick">点击</button>
  </div>
</template>

脚本部分

脚本部分定义了组件的逻辑。可以包含数据、方法、生命周期钩子等。

<script>
export default {
  data() {
    return {
      title: 'Hello Vue'
    }
  },
  methods: {
    handleClick() {
      console.log('Button clicked')
    }
  }
}
</script>

样式部分

样式部分定义了组件的CSS。可以使用scoped属性来限定样式只作用于当前组件。

<style scoped>
h1 {
  color: #42b983;
}
</style>

使用单文件组件的优势

单文件组件将相关代码组织在一起，提高了可维护性。模板、脚本和样式在一个文件中，便于理解和修改。工具链（如Vue CLI）支持热重载和预处理器的集成。

配置构建工具

现代前端工具如Vue CLI或Vite可以无缝处理.vue文件。确保项目配置了相应的loader（如vue-loader）来解析这些文件。

// webpack配置示例
module: {
  rules: [
    {
      test: /\.vue$/,
      loader: 'vue-loader'
    }
  ]
}

组件间的通信

.vue文件定义的组件可以通过props和events与其他组件通信。

<script>
export default {
  props: ['message'],
  methods: {
    emitEvent() {
      this.$emit('custom-event', 'data')
    }
  }
}
</script>

组合式API

Vue 3引入了组合式API，可以在.vue文件中使用setup函数。

<script>
import { ref } from 'vue'

export default {
  setup() {
    const count = ref(0)
    return { count }
  }
}
</script>

样式预处理

可以在style标签中使用lang属性指定预处理器，如SCSS或Less。

<style lang="scss" scoped>
$primary-color: #42b983;
h1 {
  color: $primary-color;
}
</style>