在很多vue项目中，我们使用 vue.component 来定义全局组件，紧接着用 new vue({ el: '#container '}) 在每个页面内指定一个容器元素。

这种方案在只是使用 javascript 增强某个视图的中小型项目中表现得很好。然而在更复杂的项目中，或者当你的前端完全采用 javascript 驱动的时候，以下弊端就显现出来：

• 全局定义(global definitions) 强制要求每个 component 中的命名不得重复
• 字符串模板(string templates) 缺乏语法高亮，在 html 有多行的时候，需要用到丑陋的 \
• 不支持css(no css support) 意味着当 html 和 javascript 组件化时，css 明显被遗漏
• 没有构建步骤(no build step) 限制只能使用 html 和 es5 javascript, 而不能使用预处理器，如 pug (formerly jade) 和 babel

文件扩展名为 .vue 的 single-file components(单文件组件) 为以上所有问题提供了解决方法，并且还可以使用 webpack 或 browserify 等构建工具。

这是一个文件名为 hello.vue 的简单实例：

现在我们获得：

• 完整语法高亮
• commonjs 模块
• 组件化的 css

正如我们说过的，我们可以使用预处理器来构建简洁和功能更丰富的组件，比如 jade，babel (with es2015 modules)，和 stylus。

这些特定的语言只是例子，你可以只是简单地使用 buble，typescript，scss，postcss - 或者其他任何能够帮助你提高生产力的预处理器。

起步

针对刚接触 javascript 模块开发系统的用户

有了 .vue 组件，我们就进入了高级 javascirpt 应用领域。如果你没有准备好的话，意味着还需要学会使用一些附加的工具：

• node package manager (npm)：阅读 getting started guide 直到 10: uninstalling global packages 章节。
• modern javascript with es2015/16：阅读 babel 的 learn es2015 guide. 你不需要立刻记住每一个方法，但是你可以保留这个页面以便后期参考。

在你花一些时日了解这些资源之后，我们建议你参考 webpack-simple 。只要遵循指示，你就能很快的运行一个用到 .vue 组件，es2015 和 热重载( hot-reloading ) 的vue项目!

这个模板使用 webpack，一个能将多个模块打包成最终应用的模块打包工具。 这个视频 介绍了webpack的更多相关信息。 学习了这些基础知识后， 你可能想看看 这个在 egghead.io上的 高级 webpack 课程。

在 webpack中，每个模块被打包到 bundle 之前都由一个相应的 “loader” 来转换，vue 也提供 vue-loader 插件来执行 .vue 单文件组件 的转换. 这个 webpack-simple 模板已经为你准备好了所有的东西，但是如果你想了解更多关于 .vue 组件和 webpack 如何一起运转的信息，你可以阅读 vue-loader 的文档。

针对高级用户

无论你更钟情 webpack 或是 browserify，我们为简单的和更复杂的项目都提供了一些文档模板。我们建议浏览 github.com/vuejs-templates，找到你需要的部分，然后参考 readme 中的说明，使用 vue-cli 工具生成新的项目。

webpack 中，每个模块在构建前被加载器转变，vue 官方插件 vue-loader 用来转变 .vue单文件组件。 webpack-simple 模板已经准备好了一切， 如果要更多了解 .vue 如何和 webpack 配合工作， 请看 vue-loader 文档。