Rumah >hujung hadapan web >tutorial js >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)即单文件组件的形式编写一个组件。
一个SFC中最多一个< template >块;
其内容将被提取为字符串传递给 vue-template-compiler ,然后webpack将其编译为js渲染函数,并最终注入到从 <script> 导出的组件中;</p>
<h5>2. <script>脚本块</h5>
<p>一个SFC最多一个<script>块;<br>它的默认导出应该是一个 Vue.js 的组件选项对象,也可以导出由 Vue.extend() 创建的扩展对象。<br>思考:Vue.extend() 中 data 必须是函数,所以在.vue SFC的script中,export中的data是函数</p>
<h5>3. <style>样式块</h5>
<p>一个 .vue 文件可以包含多个 <style> 标签;<br>可以使用scope和module进行封装;<br>具有不同封装模式的多个 <style> 标签可以在同一个组件中混合使用;</p>
<h5>4. 自定义语言块</h5>
<p>vue-loader 将会使用块名来查找对应的 loader 进行处理,需要配置webpack.config</p>
<h5>5. 所有语言块支持src导入</h5>
<p>导入路径遵循和 webpack 模块请求相同的路径解析规则<br>// 相对路径需要以../开始<br><template src="./template.html"></template><br><style src="./style.css"></style><br><script src="./script.js"></script>
支持组件的各个template,script,style模块使用其他非默认语言,比如: