4.2.2 起步

例子沙箱

如果你希望深入了解并开始使用单文件组件，请来 CodeSandbox看看这个简单的 todo 应用。

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

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

• Node Package Manager (NPM)：阅读Getting Started guide直到10: Uninstalling global packages章节。
• Modern JavaScript with ES2015/16：阅读 Babel 的Learn ES2015 guide。你不需要立刻记住每一个方法，但是你可以保留这个页面以便后期参考。

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

想学习更多 webpack 的知识，请移步它们的官方文档以及webpack learning academy。在 webpack 中，每个模块被打包到 bundle 之前都由一个相应的“loader”来转换，Vue 也提供vue-loader插件来执行.vue单文件组件 的转换。

针对高级用户

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

模板中使用webpack，一个模块加载器加载多个模块然后构建成最终应用。为了进一步了解 webpack，可以看官方介绍视频。如果你有基础，可以看在 Egghead.io 上的 webpack 进阶教程。