zoukankan      html  css  js  c++  java
  • 9. vue-loader是什么?使用它的用途有哪些

    一、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文件到多个文件中,你可以通过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 lang='sass'>
        /*sass*/
    </style>
  • 相关阅读:
    121.买卖股票 求最大收益1 Best Time to Buy and Sell Stock
    409.求最长回文串的长度 LongestPalindrome
    202.快乐数 Happy Number
    459.(KMP)求字符串是否由模式重复构成 Repeated Substring Pattern
    326.是否为3的平方根 IsPowerOfThree
    231.是否为2的平方根 IsPowerOfTwo
    461.求两个数字转成二进制后的“汉明距离” Hamming Distance
    206.反转单链表 Reverse Linked List
    448. 数组中缺少的元素 Find All Numbers Disappeared in an Array
    常见表单元素处理
  • 原文地址:https://www.cnblogs.com/dream111/p/13498766.html
Copyright © 2011-2022 走看看