菜单

vue-loader教程介绍

2019年6月15日 - CSS/CSS3

在最初使用webpack+vue时,看到vue里面种种语法,包涵import,export,html和css的写作方法,笔者都能抄袭地贯彻各类作用,不过为啥能那样写,一贯不太知道,直到作者询问了vue-loader。

图片 1

vue-loader功能

图片 2

如图,webpack的功力便是将右边手用户编写的代码(只要有相应的loader,能够应用别的符合本身习于旧贯的编辑撰写格局)转换来右边浏览器能识别的js。

图片 3

vue-loader正是告诉webpack如何将vue格式的文本转变到js。

图片 4

图片 5

图片 6

vue组件格式

图片 7

.vue 文件是一个自定义的文件类型,用类 HTML 语法描述二个 Vue 组件。每种.vue 文件包罗二种档案的次序的顶尖语言块 <template>, <script> 和
<style>,还允许加多可选的自定义块:

图片 8

<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>

图片 9

vue-loader 会深入分析文件,提取每一种语言块,如有要求会通过任何 loader
处理,最后将他们创设成三个 CommonJS 模块,module.exports 出二个 Vue.js
组件对象。

图片 10

vue-loader 补助选用非暗许语言,比方 CSS 预管理器,预编写翻译的 HTML
模版语言,通过安装语言块的 lang 属性。比如,你能够像上面那样使用 SASS
语法编写样式:

二秒钟让您知道我那么些AI教程到底讲了怎么~

<style lang="sass">
 /* write SASS! */
</style>

关心“C点安插体育地方”,获取越来越多设计干货和软件学习路线,不止只是统筹公众号哦
 : )

Src 导入

图片 11

纵然喜欢分隔你的 .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>

上述正是本文的全体内容,希望对我们的学习抱有扶助,也期待大家多多支持脚本之家。

你或然感兴趣的稿子:

相关文章

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图