• 欢迎访问搞代码网站,推荐使用最新版火狐浏览器和Chrome浏览器访问本网站!
  • 如果您觉得本站非常有看点,那么赶紧使用Ctrl+D 收藏搞代码吧

vue-loader教程介绍

vue 搞代码 4年前 (2022-01-08) 27次浏览 已收录 0个评论

本篇文章主要介绍了vue-loader教程介绍,vue-loader就是告诉webpack如何将vue格式的文件转换成js。有兴趣的可以了解一下

在最初使用webpack+vue时,看到vue里面各种语法,包括import,export,html和css的写作方式,我都能依葫芦画瓢地实现各种功能,但是为什么能这样写,一直不太理解,直到我了解了vue-loader。

vue-loader功能

如图,webpack的功能就是将左侧用户编写的代码(只要有相应的loader,可以使用任何符合自己习惯的编写方式)转换成右侧浏览器能识别的js。

vue-loader就是告诉webpack如何将vue格式的文件转换成js。

vue组件格式

.vue 文件是一个自定义的文件类型,用类 HTML 语法描述一个 Vue 组件。每个 .vue 文件包含三种类型的顶级语言块 , .example { color: red; } This could be e.g. documentation for the component.

vue-loader 会解析文件,提取每个语言块,如有必要会通过其它 loader 处理,最后将他们组装成一个 CommonJS 模块,module.exports 出一个 Vue.js 组件对象。

vue-loader 支持使用非默认语言,比如 CSS 预处理器,预编译的 HTML 模版语言,通过设置语言块的 lang 属性。例如,你可以本文来源[email protected]搞@^&代*@码2网像下面这样使用 SASS 语法编写样式:

  /* write SASS! */ 

Src 导入

如果喜欢分隔你的 .vue 文件到多个文件中,你可以通过 src 属性导入外部文件:

 

需要注意的是 src 导入遵循和 require() 一样的规则,这意味着你相对路径需要以 ./ 开始,你还可以从 NPM 包中直接导入资源,例如:

 <!-- import a file from the installed "todomvc-app-css" npm package -->

在自定义块上同样支持 src 导入,例如:

  

以上就是vue-loader教程介绍的详细内容,更多请关注gaodaima搞代码网其它相关文章!


搞代码网(gaodaima.com)提供的所有资源部分来自互联网,如果有侵犯您的版权或其他权益,请说明详细缘由并提供版权或权益证明然后发送到邮箱[email protected],我们会在看到邮件的第一时间内为您处理,或直接联系QQ:872152909。本网站采用BY-NC-SA协议进行授权
转载请注明原文链接:vue-loader教程介绍

喜欢 (0)
[搞代码]
分享 (0)
发表我的评论
取消评论

表情 贴图 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址