单文件组件 — Vue.js

1.介绍

使用Vue.component定义全局组件，使用new Vue({ el: '#container '})为每个页面指定一个容器元素。
这种方式的缺点是：

• 每个组件的命名不得重复
• 字符串模板缺乏语法高亮，在HTML有多行的时候，需要用到丑陋的
• 当HTML和JavaScript组件化时，CSS明显被遗漏
• 没有构建步骤，不能使用预处理器，如Babel

单文件组件为以上问题提供了解决方法。
看一个简单的例子。相关阅读：使用命令行工具创建Vue项目

<!-- App.vue -->
<template>
  <div id="app">
    <HelloWorld/>
  </div>
</template>

<script>
import HelloWorld from './components/HelloWorld'

export default {
  name: 'App',
  components: {
    HelloWorld
  }
}
</script>

<style>
</style>

<!-- HelloWorld.vue -->
<template>
  <div>
    <h2 class="title">{{msg}}</h2>
  </div>
</template>

<script>
export default {
  data () {
    return {
      msg: 'Hello Vue!'
    }
  }
}
</script>

<style scoped>
  .title {
    padding: 5px;
    color: white;
    background: gray;
  }
</style>

在一个组件里，其模板、逻辑和样式是内部耦合的，并且把他们搭配在一起实际上使得组件更加内聚且更可维护。

2.起步

CodeSandbox是专为Web应用程序开发而构建的在线编辑器。看一个例子：Simple Todo App with Vue - CodeSandbox

使用单文件组件需要了解NPM（Node Package Manager）、ES6 Module - ES6文档、Vue CLI 3。
Vue CLI为我们搞定大多数配置问题。另外，我们可能还会涉及webpack的配置，下面提供几个学习webpack的链接：

• Configuration | webpack
• The Core Concepts | webpack learning academy
• GitHub - ruanyf/webpack-demos: a collection of simple demos of Webpack

参考：

• 单文件组件 — Vue.js