vue-loader教程介绍
在最初使用webpack+vue时，看到vue里面各种语法，包括import，export，html和css的写作方式，我都能依葫芦画瓢地实现各种功能，但是为什么能这样写，一直不太理解，直到我了解了vue-loader。
vue-loader功能
如图，webpack的功能就是将左侧用户编写的代码（只要有相应的loader，可以使用任何符合自己习惯的编写方式）转换成右侧浏览器能识别的js。
vue-loader就是告诉webpack如何将vue格式的文件转换成js。
vue组件格式
.vue 文件是一个自定义的文件类型，用类 HTML 语法描述一个 Vue 组件。每个 .vue 文件包含三种类型的顶级语言块 <template>, <script> 和 <style>，还允许添加可选的自定义块：
<template>
<div class="example">{{ msg }}</div>
</template>
<script>
export default {
data() {
return {
msg: 'Hello world!'
}
}
}
</script>
<style>
.example {
color: red;
}
</style>
<custom1>
This could be e.g. documentation for the component.
</custom1>
vue-loader 会解析文件，提取每个语言块，如有必要会通过其它 loader 处理，最后将他们组装成一个 CommonJS 模块，module.exports 出一个 Vue.js 组件对象。
vue-loader 支持使用非默认语言，比如 CSS 预处理器，预编译的 HTML 模版语言，通过设置语言块的 lang 属性。例如，你可以像下面这样使用 SASS 语法编写样式：
<style lang="sass"> /* write SASS! */ </style>
Src 导入
如果喜欢分隔你的 .vue 文件到多个文件中，你可以通过 src 属性导入外部文件：
<template src="./template.html"></template> <style src="./style.css"></style> <script src="./script.js"></script>
需要注意的是 src 导入遵循和 require() 一样的规则，这意味着你相对路径需要以 ./ 开始，你还可以从 NPM 包中直接导入资源，例如：
<!-- import a file from the installed "todomvc-app-css" npm package --> <style src="todomvc-app-css/index.css">
在自定义块上同样支持 src 导入，例如：
<unit-test src="./unit-test.js"> </unit-test>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
在本篇文章里小编给大家整理的是一篇关于Vue中的常用指令及用法总结内容，对此有兴趣的朋友们可以跟着学习下。2022-01-01
这篇文章主要介绍了解决ele ui 表格表头太长问题的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-11-11
这篇文章主要为大家详细介绍了vue实现div高度可拖拽，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-10-10
Vue+webpack+Element 兼容问题总结(小结)
这篇文章主要介绍了Vue+webpack+Element 兼容问题总结(小结)，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-08-08
vue按需加载组件webpack require.ensure的方法
本篇文章主要介绍了vue按需加载组件webpack require.ensure的方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-12-12
这篇文章主要给大家介绍了关于vue跳转页面常用的4种方法与区别,文中通过实例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2022-03-03
Vue-Element-Admin集成自己的接口实现登录跳转
关于这个Vue-element-admin中的流程可能对于新的同学不是很友好，所以本文将结合实例代码，介绍Vue-Element-Admin集成自己的接口实现登录跳转，感兴趣的小伙伴们可以参考一下2021-06-06
这篇文章主要介绍了全局引入vant后使用Toast的问题及解决，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-05-05
这篇文章主要介绍了VUE v-model表单数据双向绑定,结合完整实例形式分析了vue.js实现表单数据双向绑定相关操作技巧,需要的朋友可以参考下2019-01-01
这篇文章主要介绍了巧妙运用v-model实现父子组件传值的方法示例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2019-04-04
最新评论