Vue中SFC和vue-loader的具体分析
本篇文章给大家分享的是关于Vue中SFC和vue-loader的具体分析，内容很不错，有需要的朋友可以参考一下，希望可以帮助到大家。
官网：https://vue-loader.vuejs.org/zh/
vue-loader是一个webpack的loader，简单来说是将vue文件转换为JS模块。在监测到babel-loader或者buble-loader配置时，自动支持ES2015；
使用vue-loader就可以用Vue Single-File Component (SFC)即单文件组件的形式编写一个组件。
.vue单文件组件 (SFC) 规范
1. 模板块
一个SFC中最多一个< template >块；
其内容将被提取为字符串传递给 vue-template-compiler ，然后webpack将其编译为js渲染函数，并最终注入到从 <script> 导出的组件中；</p>
<h5 id="lt-script-gt-脚本块">2. <script>脚本块</h5>
<p>一个SFC最多一个<script>块；<br>它的默认导出应该是一个 Vue.js 的组件选项对象，也可以导出由 Vue.extend() 创建的扩展对象。<br>思考：Vue.extend() 中 data 必须是函数，所以在.vue SFC的script中，export中的data是函数</p>
<h5 id="lt-style-gt-样式块">3. <style>样式块</h5>
<p>一个 .vue 文件可以包含多个 <style> 标签；<br>可以使用scope和module进行封装；<br>具有不同封装模式的多个 <style> 标签可以在同一个组件中混合使用；</p>
<h5 id="自定义语言块">4. 自定义语言块</h5>
<p>vue-loader 将会使用块名来查找对应的 loader 进行处理，需要配置webpack.config</p>
<h5 id="所有语言块支持src导入">5. 所有语言块支持src导入</h5>
<p>导入路径遵循和 webpack 模块请求相同的路径解析规则<br>// 相对路径需要以../开始<br><template src="./template.html"></template><br><style src="./style.css"></style><br><script src="./script.js"></script>
vue-loader特性概述
支持组件的各个template，script，style模块使用其他非默认语言，比如：