单文件组件

介绍

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

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

这是一个文件名为 Hello.vue 的简单实例:

现在我们获得:

作为 promise,我们可以使用预处理器来构建简洁和功能更丰富的组件,比如 Pug,Babel (with ES2015 modules),和 Stylus。

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

起步

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

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

在你花一些时日了解这些资源之后,我们建议你参考 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 工具生成新的项目。


原文: http://vuejs.org/guide/single-file-components.html