单文件组件—Vue.js

1.介绍

使用Vue.component定义全局组件，使用new Vue({ el: '#container '})为每个页面指定一个容器元素。

这种方式的缺点是：

• 每个组件的命名不得重复


• 字符串模板缺乏语法高亮，在HTML有多行的时候，需要用到丑陋的\
  


• 当HTML和Javascript组件化时，CSS明显被遗漏


• 没有构建步骤，不能使用预处理器，如Babel

单文件组件为以上问题提供了解决方法。

看一个简单的例子。相关阅读：使用命令行工具创建Vue项目

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

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