显然，不能把.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小应用，它的实现原理很简单：
- 使用cheerio提取 .vue文件的各段，重新组织成新的组件配置对象
- 以输入文件名（去除.vue后缀）作为新的组件名，在全局命名空间声明组件配置对象
- 使用serialize-javascript 将新的组件定义序列化到输出文件中
网友评论