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实现的UBB编码函数
Mar 09 Javascript
jquery点击页面任何区域实现鼠标焦点十字效果
Jun 21 Javascript
编写高效jQuery代码的4个原则和5个技巧
Apr 24 Javascript
浅谈重写window对象的方法
Dec 29 Javascript
jquery中cookie用法实例详解(获取,存储,删除等)
Jan 04 Javascript
AngularJS入门教程之AngularJS模型
Apr 18 Javascript
jQuery图片轮播(二)利用构造函数和原型创建对象以实现继承
Dec 06 Javascript
Javascript highcharts 饼图显示数量和百分比实例代码
Dec 06 Javascript
关于Vue.nextTick()的正确使用方法浅析
Aug 25 Javascript
关于vue中的ajax请求和axios包问题
Apr 19 Javascript
seajs和requirejs模块化简单案例分析
Aug 26 Javascript
vue中利用iscroll.js解决pc端滚动问题
Feb 15 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查看网页源代码的方法
2015/03/13 PHP
基于PHP的加载类操作以及其他两种魔术方法的应用实例
2017/08/28 PHP
prototype1.4中文手册
2006/09/22 Javascript
js 实现无干扰阴影效果 简单好用(附文件下载)
2009/12/27 Javascript
让firefox支持IE的一些方法的javascript扩展函数代码
2010/01/02 Javascript
在Google 地图上实现做的标记相连接
2015/01/05 Javascript
javascript 继承学习心得总结
2016/03/17 Javascript
前端性能优化及技巧
2016/05/06 Javascript
判断JS对象是否拥有某属性的方法推荐
2016/05/12 Javascript
Js获取图片原始宽高的实现代码
2016/05/17 Javascript
JS组件Bootstrap Table布局详解
2016/05/27 Javascript
vue-resourse将json数据输出实例
2017/03/08 Javascript
Nodejs 和Session 原理及实战技巧小结
2017/08/25 NodeJs
React手稿之 React-Saga的详解
2018/11/12 Javascript
JavaScript定时器设置、使用与倒计时案例详解
2019/07/08 Javascript
jQuery实现可编辑的表格
2019/12/11 jQuery
JS深入学习之数组对象排序操作示例
2020/05/01 Javascript
vue element和nuxt的使用技巧分享
2021/01/14 Vue.js
python实现bitmap数据结构详解
2014/02/17 Python
Swift 3.0在集合类数据结构上的一些新变化总结
2016/07/11 Python
Python使用QRCode模块生成二维码实例详解
2017/06/14 Python
利用python批量给云主机配置安全组的方法教程
2017/06/21 Python
解决python删除文件的权限错误问题
2018/04/24 Python
Python 实现某个功能每隔一段时间被执行一次的功能方法
2018/10/14 Python
python 的topk算法实例
2020/04/02 Python
Baracuta官方网站:Harrington夹克,G9,G4,G10等
2018/03/06 全球购物
英国顶级水晶珠宝零售商之一:Tresor Paris
2019/04/27 全球购物
如何实现jdbc性能优化
2012/07/30 面试题
会计主管岗位职责
2014/01/03 职场文书
完整版商业计划书
2014/09/15 职场文书
四风问题自我剖析材料
2014/10/07 职场文书
论群众路线学习心得体会
2014/10/31 职场文书
新教师个人总结
2015/02/06 职场文书
复兴之路展览观后感
2015/06/02 职场文书
pytorch 实现在测试的时候启用dropout
2021/05/27 Python
使用CSS自定义属性实现骨架屏效果
2022/06/21 HTML / CSS