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 相关文章推荐
比较详细的关于javascript 解析json的代码
Dec 16 Javascript
javascript Array数组对象的扩展函数代码
May 22 Javascript
ExtJS PropertyGrid中使用Combobox选择值问题
Jun 13 Javascript
基于Jquery的$.cookie()实现跨越页面tabs导航实现代码
Mar 03 Javascript
JSONP 跨域共享信息
Aug 16 Javascript
ExtJS 刷新后如何默认选中刷新前最后一次选中的节点
Apr 03 Javascript
原生JavaScript实现异步多文件上传
Dec 02 Javascript
详解jquery事件delegate()的使用方法
Jan 25 Javascript
bootstrap fileinput插件实现预览上传照片功能
Jan 23 Javascript
微信小程序扫描二维码获取信息实例详解
May 07 Javascript
vue实现随机验证码功能(完整代码)
Dec 10 Javascript
axios封装与传参示例详解
Oct 18 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
WINDOWS 2000下使用ISAPI方式安装PHP
2006/09/05 PHP
php获取文件名后缀常用方法小结
2015/02/24 PHP
CodeIgniter实现从网站抓取图片并自动下载到文件夹里的方法
2015/06/17 PHP
浅析PHP中call user func()函数及如何使用call user func调用自定义函数
2015/11/05 PHP
php无法连接mysql数据库的正确解决方法
2016/07/01 PHP
ThinkPHP 3.2.3实现加减乘除图片验证码
2018/12/05 PHP
PHP下载文件函数与用法示例
2019/09/27 PHP
setInterval与clearInterval的使用示例代码
2014/01/28 Javascript
jQuery在ul中显示某个li索引号的方法
2015/03/17 Javascript
学习JavaScript设计模式之观察者模式
2020/04/22 Javascript
AngularJS 执行流程详细介绍
2016/08/18 Javascript
js中小数向上取整数,向下取整数,四舍五入取整数的实现(必看篇)
2017/02/13 Javascript
jQuery图片瀑布流的简单实现代码
2017/03/15 Javascript
vue中v-for加载本地静态图片方法
2018/03/03 Javascript
基于IView中on-change属性的使用详解
2018/03/15 Javascript
详解关于React-Router4.0跳转不置顶解决方案
2019/05/10 Javascript
JQuery基于FormData异步提交数据文件
2020/09/01 jQuery
Vue 实现可视化拖拽页面编辑器
2021/02/01 Vue.js
python实现的解析crontab配置文件代码
2014/06/30 Python
Python 3中的yield from语法详解
2017/01/18 Python
Python基于opencv调用摄像头获取个人图片的实现方法
2019/02/21 Python
TensorFlow卷积神经网络之使用训练好的模型识别猫狗图片
2019/03/14 Python
Python自动化之数据驱动让你的脚本简洁10倍【推荐】
2019/06/04 Python
python下的opencv画矩形和文字注释的实现方法
2019/07/09 Python
详解Django配置优化方法
2019/11/18 Python
Python venv虚拟环境配置过程解析
2020/07/08 Python
matplotlib制作雷达图报错ValueError的实现
2021/01/05 Python
python palywright库基本使用
2021/01/21 Python
应聘美工求职信
2013/11/07 职场文书
医学类导师推荐信范文
2013/11/19 职场文书
优秀员工自荐书范文
2013/12/08 职场文书
初中毕业生的自我评价
2014/03/03 职场文书
诚实守信道德模范事迹材料
2014/08/15 职场文书
2016年5月份红领巾广播稿
2015/12/21 职场文书
多表查询、事务、DCL
2021/04/05 MySQL
MySQL 逻辑备份 into outfile
2022/05/15 MySQL