Vue 单文件组件

Question

基于 JavaScript 的 Vue 组件 非常适合中小型项目，但如果您的项目变得更加复杂，就会出现如下问题：

• 每个组件名称必须是唯一的
• 组件中不支持 CSS
• 字符串 模板 缺少语法高亮以及多行 HTML 需要斜杠

然而，Vue.js 的单文件组件解决了所有这些问题！ 单文件组件的扩展名为 .vue，这意味着您需要像 Webpack 或 Browserify 这样的编译器。 一种 .vue 文件可以有许多顶级语言块以及您自己的自定义块，但是三个核心块是 <template>, <script> 和 <style>，在制作组件时，三个核心块是可选的。

关于结构的重要说明 .vue文件是那个 <template> 和 <script>可能只出现一次 <style> 您实现的自定义块可能会出现多次。 您可以在 <style> 标记您是否希望 css 位于组件的本地。 如果您选择本地（作用域），则父组件的样式将不会泄漏到该组件中。 这是一个简单的例子 .vue 文件：

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

<script>
export default {
  data () {
    return {
      msg: 'Hello world!'
    }
  }
}
</script>
<style scoped>
.example {
  color: red;
}
</style>

<custom>
Here is an example of a custom language block.
</custom>

设置项目以使用单文件组件时要采取的另一个步骤是配置 webpack 以了解什么是 .vue 文件是什么以及如何处理它。 你将需要 @vue/compiler-sfc 包以及 vue-loader 包裹。 下面是配置 webpack 处理的例子 .vue 文件：

const { VueLoaderPlugin } = require("vue-loader");

module.exports = {
  module: {
    rules: [
      {
        test: /\.vue$/,
        loader: "vue-loader"
      }
    ]
  },
  plugins: [
    new VueLoaderPlugin()
  ]
};