深入理解vue-loader如何使用


Posted in Javascript onJune 06, 2017

.vue格式的文件使用类似HTML的语法描述vue组件。每个.vue文件包含三种最基本的语言块:,

<template>
 <div class="example">{{ msg }}</div>
</template>

<script>
export default {
 data () {
  return {
   msg: 'Hello world!'
  }
 }
}
</script>

<style>
.example {
 color: red;
}
</style>

vue-loader会解析这个文件中的每个语言块,然后传输到其它的loaders,最终输出到module.exports是vue组件的配置对象的CommonJS模块。

vue-loader通过指定语言块的lang属性支持css预编译、html编译模板等语言格式。如在组件的style块中使用sass

<style lang="sass">
 /* write SASS! */
</style>

语言块

  1. 默认语言:html
  2. 每个*.vue最多包含一个块
  3. 块中的内容作为字符串提取出来

src 引入

如果你习惯将*.vue组件分割成多个文件,可以使用语言块的src属性把扩展文件引入到组件中。

<template src="./template.html"></template>
<style src="./style.css"></style>
<script src="./script.js"></script>

语法高亮

在编辑器中可以将*.vue文件作为HTML处理,实现语法高亮

使用 vue-cli

推荐vue-cli和vue-loader组合使用搭建项目

npm install -g vue-cli
vue init webpack-simple hello-vue
cd hello-vue
npm install
npm run dev # ready to go!

ES2015

当vue-loader在同一个项目中检测到babel-loader或者buble-loader的存在时,会用他们来处理*.vue文件中

<script>
import ComponentA from './ComponentA.vue'
import ComponentB from './ComponentB.vue'

export default {
 components: {
  ComponentA,
  ComponentB
 }
}
</script>

我们可以使用ES2015对象的简写来定义子组件,{ ComponentA }是{ ComponentA: ComponentA }的简写。vue将会自动把键转换为component-a,是以我们可以在中引入组件。

ES2015

*.vue文件的的内容会被编译进js渲染函数,经过 Buble等支持ES2015特性的自定义生成工具处理。所以我们可以使用Object shorthand properties 和 computed properties等ES2015特性。

<div :class="[{ active: active }, isButton ? prefix + '-button' : null]">

可以简写成:

<div :class="{ active, [`${prefix}-button`]: isButton }">

可以用buble自定义模板的特性支持

处理普通js文件

由于vue-loader只处理*.vue文件,需要在webpack的配置文件中配置babel-loader或者buble-loader来处理普通的js文件。vue-cli在项目中可以做这些事情。

在.babelrc文件中配置babel

局部css

当一个style标签带有scoped属性,它的css只应用于当前组件的元素。

<style scoped>
.example {
 color: red;
}
</style>

<template>
 <div class="example">hi</div>
</template>

转换为:

<style>
.example[_v-f3f3eg9] {
 color: red;
}
</style>

<template>
 <div class="example" _v-f3f3eg9>hi</div>
</template>

注:

1 . 在同一个组件可以包含局部和全局样式

<style>
/* global styles */
</style>

<style scoped>
/* local styles */
</style>
  1. 子组件的根节点会受到父组件和本组件的局部css样式影响
  2. Partials are not affected by scoped styles.
  3. 有了局部样式仍然需要类选择器
  4. 在包含迭代组件的组件中小心使用子孙选择器。一条关于.a .b的css规则,如果在类名为a的标签中使用了子组件,那么子组件中的类名为b的标签也会应用这条规则。

CSS 模块化

英文教程

CSS Modules便于实现css模块化,vue-loader通过模仿css的scope提供了module来实现css模块化集成。

使用在

<style module>
.red {
 color: red;
}
.bold {
 font-weight: bold;
}
</style>

这样打开CSS Module模式,class对象会作为$style的属性注入到组件中,进而在中进行动态的类绑定

<template>
 <p :class="$style.red">
  This should be red
 </p>
</template>

style中的类作为被计算的属性,也可以在:class中使用数组或者对象语法

<template>
 <div>
  <p :class="{ [$style.red]: isRed }">
   Am I red?
  </p>
  <p :class="[$style.red, $style.bold]">
   Red and bold
  </p>
 </div>
</template>

或者在js中获取使用它

<script>
export default {
 created () {
  console.log(this.$style.red)
  // -> "_1VyoJ-uZOjlOxP7jWUy19_0"
  // an identifier generated based on filename and className.
 }
}
</script>

自定义注入名

由于一个vue组件可以包含多个

<style module="a">
 /* identifiers injected as $a */
</style>

<style module="b">
 /* identifiers injected as $b */
</style>

配置css-loader

用css-loader来处理CSS Modules,以下是css-loader对

{
 modules: true,
 importLoaders: true,
 localIdentName: '[hash:base64]'
}

通过vue-loader的cssModules配置项定制css-loader

// wepback 1
vue: {
 cssModules: {
  // overwrite local ident name
  localIdentName: '[path][name]---[local]---[hash:base64:5]',
  // enable camelCase
  camelCase: true
 }
}

// webpack 2
module: {
 rules: [
  {
   test: '\.vue$',
   loader: 'vue',
   options: {
    cssModules: {
     localIdentName: '[path][name]---[local]---[hash:base64:5]',
     camelCase: true
    }
   }
  }
 ]
}

PostCSS

任何vue-loader处理输出的css都经过PostCSS进行局部css重写,我们也可以增加PostCSS插件进行这些处理,如autoprefixer和 CSSNext。

Webpack 1.x用法:

// webpack.config.js
module.exports = {
 // other configs...
 vue: {
  // use custom postcss plugins
  postcss: [require('postcss-cssnext')()]
 }
}

Webpack 2.x用法:

// webpack.config.js
module.exports = {
 // other configs...
 plugins: [
  new webpack.LoaderOptionsPlugin({
   vue: {
    // use custom postcss plugins
    postcss: [require('postcss-cssnext')()]
   }
  })
 ]
}

postcss也支持插件数组

postcss: {
 plugins: [...], // list of plugins
 options: {
  parser: sugarss // use sugarss parser
 }
}

热加载

热加载不只是修改文件后页面的刷新。修改某个.vue组件后,页面中这个组件的所有实例都会被替换而不重载页面,它还保存了应用的当前状态以及被替换的组件。

深入理解vue-loader如何使用

如果使用了vue-cli搭建项目,自带了热加载。

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

Javascript 相关文章推荐
jQuery+jqmodal弹出窗口实现代码分明
Jun 14 Javascript
js正则表达式中test,exec,match方法的区别说明
Jan 29 Javascript
jquery ajax传递中文参数乱码问题及解决方法说明
Feb 07 Javascript
ClearTimeout消除闪动实例代码
Feb 29 Javascript
javascript Promise简单学习使用方法小结
May 17 Javascript
详解ES6中的let命令
Apr 05 Javascript
Node.js利用Net模块实现多人命令行聊天室的方法
Dec 23 Javascript
微信小程序实现底部导航
Nov 05 Javascript
JS/HTML5游戏常用算法之碰撞检测 包围盒检测算法详解【凹多边形的分离轴检测算法】
Dec 13 Javascript
VUE项目中加载已保存的笔记实例方法
Sep 14 Javascript
如何基于jQuery实现五角星评分
Sep 02 jQuery
利用JavaScript为句子加标题的3种方法示例
Jan 05 Javascript
利用webstrom调试Vue.js单页面程序的方法教程
Jun 06 #Javascript
JavaScript实现一个空中避难的小游戏
Jun 06 #Javascript
vue脚手架vue-cli的学习使用教程
Jun 06 #Javascript
D3.js进阶系列之CSV表格文件的读取详解
Jun 06 #Javascript
JavaScript实现移动端轮播效果
Jun 06 #Javascript
js评分组件使用详解
Jun 06 #Javascript
javascript中mouseenter与mouseover的异同
Jun 06 #Javascript
You might like
php中过滤非法字符的具体实现
2013/10/29 PHP
php中操作memcached缓存进行增删改查数据的实现代码
2014/08/15 PHP
php数组函数array_walk用法示例
2016/05/26 PHP
php使用gd2绘制基本图形示例(直线、圆、正方形)
2017/02/15 PHP
PHP实现的最大正向匹配算法示例
2017/12/19 PHP
ThinkPHP5.0 图片上传生成缩略图实例代码说明
2018/06/20 PHP
js获取height和width的方法说明
2013/01/06 Javascript
js导航菜单(自写)简单大方
2013/03/28 Javascript
JavaScript Promise启示录
2014/08/12 Javascript
Javascript获取当前日期的农历日期代码
2014/10/08 Javascript
jQuery代码实现发展历程时间轴特效
2015/07/30 Javascript
JS数组排序技巧汇总(冒泡、sort、快速、希尔等排序)
2015/11/24 Javascript
SpringMVC restful 注解之@RequestBody进行json与object转换
2015/12/10 Javascript
极力推荐一款小巧玲珑的可视化编辑器bootstrap-wysiwyg
2016/05/27 Javascript
浅谈js中function的参数默认值
2017/02/20 Javascript
ES6新特性之Symbol类型用法分析
2017/03/31 Javascript
JavaScript数据结构之二叉树的计数算法示例
2017/04/13 Javascript
vue组件生命周期详解
2017/11/07 Javascript
vue-resource请求实现http登录拦截或者路由拦截的方法
2018/07/11 Javascript
vue单页缓存方案分析及实现
2018/09/25 Javascript
浅谈JavaScript中你可能不知道URL构造函数的属性
2020/07/13 Javascript
[48:26]VGJ.S vs infamous Supermajor 败者组 BO3 第二场 6.4
2018/06/05 DOTA
Python中分数的相关使用教程
2015/03/30 Python
python字典的常用操作方法小结
2016/05/16 Python
Mac 上切换Python多版本
2017/06/17 Python
python获取当前目录路径和上级路径的实例
2018/04/26 Python
Tensorflow中使用tfrecord方式读取数据的方法
2018/06/19 Python
Python定义二叉树及4种遍历方法实例详解
2018/07/05 Python
利用matplotlib为图片上添加触发事件进行交互
2020/04/23 Python
蔻驰法国官网:COACH法国
2018/11/14 全球购物
雅诗兰黛澳大利亚官网:Estée Lauder澳大利亚
2019/05/31 全球购物
名词解释型面试题(主要是网络)
2013/12/27 面试题
中级会计职业生涯规划书
2014/03/01 职场文书
学校标语大全
2014/06/19 职场文书
2015秋季幼儿园开学寄语
2015/03/25 职场文书
2019最新版股权转让及委托持股协议书范本
2019/08/07 职场文书