解析过程
1. 使用@vue/compiler-sfc的parse方法把sfc进行解析,解析成template、script、style三部分,然后分别对不同的部分使用不同的方法进行解析。如下图所示:
将页面内容进行导出,将template以render函数的形式导出到script选项中。将import语句重写如下:
使用@vue/compiler-sfc的compileScript对script部分进行解析如下:
使用@vue/compiler-sfc的compileTemplate对template部分解析如下:
使用@vue/compiler-sfc的compileStyle方法对style部分解析如下:
总结
以上简单总结说明了vue-loader对sfc的解析过程,对于具体部分的实现细节需要去对应的vue/compile的源码中寻找。