欢迎来到[自学php网] ①群 287460651

主页 > 前端 > vue教程 >

[Vue]vue-loader作用

来源:未知    时间:2020-03-24 14:53 作者:小飞侠 阅读:

[导读] 一、vue文件 vue文件是一个自定义的文件类型,用类HTML语法描述一个vue组件,每个.vue组件包含三种类型的顶级语言快 template script style,还允许添加自定义的模块; template div{{ msg }}/div...

一、vue文件


vue文件是一个自定义的文件类型,用类HTML语法描述一个vue组件,每个.vue组件包含三种类型的顶级语言快< template>< script>< style>,还允许添加自定义的模块;



<template>

  <div>{{ 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文件到多个文件中,你可以通过src属性导入外部文件:


<template src='./template.html'></template>

<style src='./style.css'></style>

<script src='./script.js'></script>

 


二、vue-loader


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


1:< temlate>语言块 

(1)默认语言:html 

(2)每个.vue文件最多包含一个< template>块 

(3)内容将被提取为字符串,将编译用作VUE组件的template选项; 

2:< script> 

(1)默认语言:JS(在监测到babel-loader或者buble-loader配置时,自动支持ES2015) 

(2)每个.vue文件最多包含一个< script>块 

(3)该脚本在类CommonJS环境中执行(就像通过webpack打包的正常JS模块)。所以你可以require()其他依赖。在ES2015支持下,也可以使用import跟export语法 

(4)脚本必须导出Vue.js组件对象,也可以导出由VUE.extend()创建的扩展对象;但是普通对象是更好的选择; 

3:< style> 

(1)默认语言:css 

(2)一个.vue文件可以包含多个< style>标签 

(3)这个标签可以有 scoped 或者 module属性来帮助你讲样式封装到当前组件;具有不同封装模式的多个< style>标签可以在同一个组件中混合使用 

(4)默认情况下,可以使用style-loader提取内容,并且通过< style>标签动态假如文档的< head>中,也可以配置webpack将所有的styles提取到单个CSS文件中; 

4:自定义块 

可以在.vue文件中添加额外的自定义块来实现项目的特殊需求;例如< docs>块;vue-loader将会使用标签名来查找对应的webpack loaders来应用到对应的模块上;webpack需要在vue-loader的选项loaders中指定; 


vue-loader支持使用非默认语言,比如CSS预处理器,预编译的HTML模板语言,通过设置语言块的lang属性:


<style>

    /*sass*/

</style>

 


最新文章

点击排行

自学PHP网专注网站建设学习,PHP程序学习,平面设计学习,以及操作系统学习

京ICP备14009008号-1@版权所有www.zixuephp.com

网站声明:本站所有视频,教程都由网友上传,站长收集和分享给大家学习使用,如由牵扯版权问题请联系站长邮箱904561283@qq.com