vue-loader教程介绍


Posted in Javascript onJune 14, 2017

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

vue-loader功能

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

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

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js 事件小结 表格区别
Aug 13 Javascript
JAVASCRIPT IE 与 FF中兼容问题小结
Feb 18 Javascript
jQuery 使用手册(一)
Sep 23 Javascript
js 判断checkbox是否选中的实现代码
Nov 23 Javascript
Javascript堆排序算法详解
Dec 03 Javascript
使用jQuery和Bootstrap实现多层、自适应模态窗口
Dec 22 Javascript
transport.js和jquery冲突问题的解决方法
Feb 10 Javascript
Javascript的动态增加类的实现方法
Oct 20 Javascript
原生js实现电商侧边导航效果
Jan 19 Javascript
详谈$.data()的用法和作用
Feb 13 Javascript
详解如何从零开始搭建Express+Vue开发环境
Jul 17 Javascript
基于Vue实现微信小程序的图文编辑器
Jul 25 Javascript
JS中mouseup事件丢失的原因与解决办法
Jun 14 #Javascript
Vue2.0 从零开始_环境搭建操作步骤
Jun 14 #Javascript
jQuery.form.js的使用详解
Jun 14 #jQuery
ExtJs异步无法向外传值和赋值的完美解决办法
Jun 14 #Javascript
详解Vue爬坑之vuex初识
Jun 14 #Javascript
详解vue2.0的Element UI的表格table列时间戳格式化
Jun 13 #Javascript
微信小程序调用PHP后台接口 解析纯html文本
Jun 13 #Javascript
You might like
php网页后退不再出现过期
2007/03/08 PHP
PHP配置文件中最常用四个ini函数
2007/03/19 PHP
优化php效率,提高php性能的一些方法
2011/03/24 PHP
解析php安全性问题中的:Null 字符问题
2013/06/21 PHP
PHP基于GD库的缩略图生成代码(支持jpg,gif,png格式)
2014/06/19 PHP
PHP中创建和验证哈希的简单方法实探
2015/07/06 PHP
PHP使用pear自带的mail类库发邮件的方法
2015/07/08 PHP
Yii2 加载css、js 载静态资源的方法
2017/03/10 PHP
php 二维数组快速排序算法的实现代码
2017/10/17 PHP
PHP实现统计代码行数小工具
2019/09/19 PHP
PHP 对象接口简单实现方法示例
2020/04/13 PHP
JS实现下拉框的动态添加(附效果)
2013/04/03 Javascript
jQuery对html元素取值与赋值的方法
2013/11/20 Javascript
js四舍五入数学函数round使用实例
2014/05/09 Javascript
js中substr,substring,indexOf,lastIndexOf,split,replace的用法详解
2015/11/09 Javascript
js不间断滚动的简单实现
2016/06/03 Javascript
jQuery筛选数组之grep、each、inArray、map的用法及遍历json对象
2016/06/20 Javascript
Angularjs中的ui-bootstrap的使用教程
2017/02/19 Javascript
Angular HMR(热模块替换)功能实现方法
2018/04/04 Javascript
es6中比较有用的7个技巧小结
2019/07/12 Javascript
VUE路由动态加载实例代码讲解
2019/08/26 Javascript
浅谈python日志的配置文件路径问题
2018/04/28 Python
python重要函数eval多种用法解析
2020/01/14 Python
python实现在线翻译功能
2020/03/03 Python
Python 爬取淘宝商品信息栏目的实现
2021/02/06 Python
纽约香氛品牌:NEST Fragrance
2018/10/15 全球购物
英国顶级水晶珠宝零售商之一:Tresor Paris
2019/04/27 全球购物
大学生毕业的自我鉴定
2013/11/13 职场文书
2014国庆节演讲稿:祖国在我心中(400字)
2014/09/25 职场文书
鼋头渚导游词
2015/02/05 职场文书
最感人的道歉情书
2015/05/12 职场文书
委托收款证明
2015/06/23 职场文书
2016年寒假社会实践活动总结
2015/10/10 职场文书
导游词之云南丽江-泸沽湖
2019/09/26 职场文书
基于tensorflow权重文件的解读
2021/05/26 Python
Python自动化之批量处理工作簿和工作表
2021/06/03 Python