vue单文件组件的原理

Question

关于单文件组件的原理
刚刚开始学的时候是先用Vue.extend定义一个组件，再用Vue.component注册。
现在用了基于webpack的.vue单文件组件，那么这两个之间的关系是什么呢？

Answer 1

比如你有一个父组件Parent，在它当中你用Vue.extend, Vue.component注册了子组件Child。

这时父组件Parent和子组件Child的代码都集中在父组件的文件中，如果你还想在其他组件中使用Child，那你只能再把代码复制一份。

而如果你使用.vue的单文件组件，关于Child的所有template,js,css都在这个文件中。当你在其他文件中想用到该组件直接引入就好了，不用写重复的代码。随用随走。

Answer 2

webpack 可以使用vue-loader打包.vue文件

Answer 3

你可以根据组件去组织vue的代码。
Wepack的Vue-loader会帮你合并所有组件。然后在页面下可以正常工作。