深入理解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 相关文章推荐
JavaScript Konami Code 实现代码
Jul 29 Javascript
javascript 事件处理程序介绍
Jun 27 Javascript
JS操作Cookies包括(读取添加与删除)
Dec 26 Javascript
jQuery JSON实现无刷新三级联动实例探讨
May 28 Javascript
Flexigrid在IE下不显示数据的有效处理方法
Sep 04 Javascript
jquery实现的树形目录实例
Jun 26 Javascript
JavaScript中Math对象的方法介绍
Jan 05 Javascript
vue移动端UI框架实现QQ侧边菜单组件
Mar 09 Javascript
layui table 参数设置方法
Aug 14 Javascript
vue根据值给予不同class的实例
Sep 29 Javascript
vue实现父子组件之间的通信以及兄弟组件的通信功能示例
Jan 29 Javascript
简单了解JS打开url的方法
Feb 21 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执行速度全攻略(上)
2006/10/09 PHP
php设计模式之命令模式的应用详解
2013/05/21 PHP
PHP中使用sleep函数实现定时任务实例分享
2014/08/21 PHP
php函数传值的引用传递注意事项分析
2016/06/25 PHP
laravel5.5添加echarts实现画图功能的方法
2019/10/09 PHP
用函数式编程技术编写优美的 JavaScript
2006/11/25 Javascript
ExtJS 2.0实用简明教程 之Border区域布局
2009/04/29 Javascript
ajax的hide隐藏问题解决方法
2012/12/11 Javascript
jquery实现点击消失的代码
2014/03/03 Javascript
js显示文本框提示文字的方法
2015/05/07 Javascript
js实现图片放大和拖拽特效代码分享
2015/09/05 Javascript
基于JavaScript实现树形下拉框
2016/08/10 Javascript
JavaScript探测CSS动画是否已经完成的方法
2016/08/30 Javascript
浅谈webpack下的AOP式无侵入注入
2017/11/12 Javascript
利用Vconsole和Fillder进行移动端抓包调试方法
2019/03/05 Javascript
微信小程序获取用户信息的两种方法wx.getUserInfo与open-data实例分析
2019/05/03 Javascript
在Vue环境下利用worker运行interval计时器的步骤
2019/08/01 Javascript
JS对日期操作封装代码实例
2019/11/08 Javascript
vue data有值,但是页面{{}} 取不到值的解决
2020/11/09 Javascript
CentOS 8.2服务器上安装最新版Node.js的方法
2020/12/16 Javascript
[40:50]2014 DOTA2国际邀请赛中国区预选赛 5 23 CIS VS LGD第四场
2014/05/24 DOTA
Django 添加静态文件的两种实现方法(必看篇)
2017/07/14 Python
python逐行读写txt文件的实例讲解
2018/04/03 Python
python实现数据导出到excel的示例--普通格式
2018/05/03 Python
使用Py2Exe for Python3创建自己的exe程序示例
2018/10/31 Python
Python 使用 docopt 解析json参数文件过程讲解
2019/08/13 Python
详解CSS3实现响应式手风琴效果
2020/06/10 HTML / CSS
HTML5 HTMLCollection和NodeList的区别详解
2020/04/29 HTML / CSS
Canal官网:巴西女性时尚品牌
2019/10/16 全球购物
医学院四年学习生活的自我评价
2013/11/06 职场文书
设计师求职信
2014/07/01 职场文书
中小学校园安全广播稿
2014/09/29 职场文书
小学生思想品德评语
2014/12/31 职场文书
护理实习生带教计划
2015/01/16 职场文书
世界文化遗产导游词
2015/02/13 职场文书
幼儿园庆元旦主持词
2015/07/06 职场文书