vue-loader教程介绍

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

vue-loader功能

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

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

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>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • Vue + Webpack + Vue-loader学习教程之功能介绍篇

    Vue + Webpack + Vue-loader学习教程之功能介绍篇

    Vue-loader 是什么? vue-loader 是一个加载器,能把如下格式的 Vue 组件转化成JavaScript模块. vue-loader 提供了一些非常酷炫的特性: ES2015默认可用: 在每个 Vue 组件内支持其他的 Webpack 加载器,如用于<style>的 SASS 和用于<template> 的 Jade. 把 <style> 和 <template> 内引用的静态资源作为模块依赖项对待,并用Webpack 加载器处理. 对每个

  • Vue + Webpack + Vue-loader学习教程之相关配置篇

    前言 之前已经介绍过了Vue + Webpack + Vue-loader的相关功能介绍,大家可以点击这篇文章了解详情.下面就来看看相关配置篇,感兴趣的可以参考学习. 使用预处理器 在 Webpack 中,所有的预处理器需要和一个相应的加载器一同使用.vue-loader 允许你用其它的 Webpack 加载器去处理 Vue 组件一部分代码.它会根据 lang 属性自动用适当的加载器去处理. CSS 例如,我们编译用 SASS 编译 <style> 标签: npm install sass-l

  • 深入理解vue-loader如何使用

    深入理解vue-loader如何使用

    .vue格式的文件使用类似HTML的语法描述vue组件.每个.vue文件包含三种最基本的语言块:, <template> <div class="example">{{ msg }}</div> </template> <script> export default { data () { return { msg: 'Hello world!' } } } </script> <style> .exa

  • Vue.js教程之计算属性

    Vue.js 的内联表达式非常方便,但它最合适的使用场景是简单的布尔操作或字符串拼接.如果涉及更复杂的逻辑,你应该使用计算属性. 计算属性是用来声明式的描述一个值依赖了其它的值.当你在模板里把数据绑定到一个计算属性上时,Vue 会在其依赖的任何值导致该计算属性改变时更新 DOM.这个功能非常强大,它可以让你的代码更加声明式.数据驱动并且易于维护. 通常情况下,使用计算属性会比使用过程式的$watch回调更合适.比如下面的例子: <div id="demo">{{fullNa

  • Vue实战教程之仿肯德基宅急送App

    Vue学习有一段时间了,就想着用Vue来写个项目练练手,弄了半个月,到今天为止也算勉强能看了. 由于不知道怎么拿手机App的接口,并且KFC电脑端官网真的...一言难尽,所以项目所有数据都是我截图然后写在EasyMock里的,有需要的同学可以自取 首页 商品页 外卖页 技术栈 vue + webpack + vuex + axios 文件目录 │ App.vue │ main.js │ ├─assets │ logo.png │ ├─components │ │ cartcontrol.vue

  • Vue基础教程之条件渲染和列表渲染

    目录 前言 1.1 作用 1.2 控制元素显隐的方式 1.3 初始渲染对比 1.4 切换消耗对比 1.5 使用场景对比 1.6 其他 2 v-if 和 v-for 2.1 v-if 和 v-for 不能同时用的原因 2.2 v-if 和 v-for 一起用的解决方案 3 列表渲染的 key 有什么用 总结 前言 什么是条件渲染?在我们的页面中会有很多这样的应用场景,比如说我们今天要上架一个活动,这个活动页面只在今天有效,在晚上的24点或者说在明天早上凌晨0点1秒的时候就要把这个页面下下来,把这个

  • Vue自定义指令介绍(2)

    Vue自定义指令介绍(2)

    Vue指令 Vue的指令以v-开头,作用在HTML元素上,将指令绑定在元素上,给绑定的元素添加一些特殊行为. 例如: <h1 v-if="yes">Yes</h1> 其中,v-是Vue的标识,if是指令ID,yes是expression.yes是MVVM中的VM即ViewModel,当它的值发生变化,就会触发指令,改变View视图的显示. expression还可以使用内联的模式,任何依赖的属性发生变化时都会触发指令的执行.如: <h1 v-if=&quo

  • Vue生命周期介绍和钩子函数详解

    Vue生命周期介绍和钩子函数详解

    目录 Vue生命周期介绍和钩子函数 VUE生命周期钩子 Vue生命周期简介 create 和 mounted 相关 update 相关 destroy 相关 总结 Vue生命周期介绍和钩子函数 组件每个阶段它的内部构造是不一样的,所以一般特定的钩子做特定的事,比如Ajax获取数据就可以在mounted阶段.从Vue实例被创建开始到该实例最终被销毁的整个过程叫做VUE的生命周期,在这个生命周期内发生了下面的事情:从vue实例被创建开始,首先vue实例被创建,之后开始数据的初始化,编译模板,挂载do

  • vue学习教程之带你一步步详细解析vue-cli

    vue学习教程之带你一步步详细解析vue-cli

    vue-cli 在开发前,我们要至少通读一遍vue官方文档和API(看官方文档是最重要的,胜过看五十.一百篇博客),英文阅读能力还行的建议阅读英文文档,中文文档内容会稍落后,还要通读相关的vue-router.axios.vuex等. 一般来说我们都是先利用vue-cli来搭建项目基本架构. 正文 首先,我们来说一下安装的东西吧!处于有头有尾的目的,还是几句话草草了事.步骤如下: 安装vue-cli npm install vue-cli -g 以webpack模版安装目录 vue init w

  • vue-loader教程介绍

    vue-loader教程介绍

    在最初使用webpack+vue时,看到vue里面各种语法,包括import,export,html和css的写作方式,我都能依葫芦画瓢地实现各种功能,但是为什么能这样写,一直不太理解,直到我了解了vue-loader. vue-loader功能 如图,webpack的功能就是将左侧用户编写的代码(只要有相应的loader,可以使用任何符合自己习惯的编写方式)转换成右侧浏览器能识别的js. vue-loader就是告诉webpack如何将vue格式的文件转换成js. vue组件格式 .vue 文

  • Windows下的PHP 5.3.x安装 Zend Guard Loader教程

    从PHP5.3开始如果要支持ZendGuard加密的PHP代码,必须安装Zend Guard Loader,老的zend optimizer将不被支持.另外,Zend Guard Loader 仅支持 Non Thread Safe 版本的PHP. 下载扩展: http://www.zend.com/en/products/guard/downloads 安装扩展: 在php.ini中追加: 复制代码 代码如下: [Zend.loader] zend_extension='D:/Program

  • Android Loader详细介绍及实例代码

    一,Android装载器基本方法 装载器从android3.0开始引进.它使得在activity或fragment中异步加载数据变得简单.装载器具有如下特性: 它们对每个Activity和Fragment都有效. 他们提供了异步加载数据的能力. 它们监视数据源的一将一动并在内容改变时传送新的结果. 当由于配置改变而被重新创建后,它们自动重连到上一个加载器的游标,所以不必重新查询数据. 装载器API概述 在使用装载器时,会涉及很多类和接口们,我们在下表中对它们总结一下: Class/Interfa

  • vue路由教程之静态路由

    前言 vue的单页面应用是基于路由和组件的,路由用于设定访问路径,并将路径和组件映射起来.传统的页面应用,是用一些超链接来实现页面切换和跳转的.在vue-router单页面应用中,则是路径之间的切换,也就是组件的切换. 首先在html中,引入vue-router.js和vue.js,用router-link触发路由跳转,router-link可以像a标签一样使用和定义样式 router-view区域是路由匹配到的组件渲染的地方 <script src="https://unpkg.com/

随机推荐