1.03-vue文件的转换

显然，不能把.vue文件直接丢给浏览器，因此在调试之前必须引入一个新的环节 —— 构建阶段：

workflow-vue-file.png

在构建阶段，我们需要把.vue文件转换为可以在浏览器中运行的JavaScript代码。 容易理解，转换后的组件定义，其template部分的内容，对应于.vue文件中的 模板段的内容。而beforeCreate钩子，则是为了将.vue文件中的样式声明内容， 利用一个<style>标签添加到宿主HTML文件中：

vue-transformer.png

Vue.js没有提供可单独运行的.vue文件构建工具，不过它为两种常见的前端构建工具链提供了 相应的插件支持：webpack下的vue-loader，browserify下的vueify。

轻量的.vue文件转换器：vue2js

在引入Vue.js的官方工具之前，出于循序渐进的目的，我们使用自制的简易转换器vue2js 来将EzApp.vue转换为EzApp.vue.js：

~$ node ez-compiler.js components/EzApp.vue
transpiled to : /components/EzApp.vue.js

vue2js是一个node.js小应用，它的实现原理很简单：

1. 使用cheerio提取 .vue文件的各段，重新组织成新的组件配置对象
2. 以输入文件名（去除.vue后缀）作为新的组件名，在全局命名空间声明组件配置对象
3. 使用serialize-javascript 将新的组件定义序列化到输出文件中