深入理解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 读取和设置文档元素的样式属性
Apr 14 Javascript
WEB页子窗口(showModalDialog和showModelessDialog)使用说明
Oct 25 Javascript
兼容ie、firefox的图片自动缩放的css跟js代码分享
Aug 12 Javascript
JQuery实现展开关闭层的方法
Feb 17 Javascript
详解Matlab中 sort 函数用法
Mar 20 Javascript
使用Ajax与服务器(JSON)通信实例
Nov 04 Javascript
微信小程序中form 表单提交和取值实例详解
Apr 20 Javascript
JS简单实现父子窗口传值功能示例【未使用iframe框架】
Sep 20 Javascript
Popup弹出框添加数据实现方法
Oct 27 Javascript
使用Node.js实现一个多人游戏服务器引擎
Mar 13 Javascript
JS多个异步请求 按顺序执行next实现解析
Sep 16 Javascript
Vue.js下拉菜单组件使用方法详解
Oct 19 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
fgetcvs在linux的问题
2012/01/15 PHP
基于PHP生成静态页的实现方法
2013/05/10 PHP
PHP实现将几张照片拼接到一起的合成图片功能【便于整体打印输出】
2017/11/14 PHP
一个用js实现的页内搜索代码
2007/05/23 Javascript
关于jquery append() html时的小问题的解决方法
2010/12/16 Javascript
Extjs4.0设置Ext.data.Store传参的请求方式(默认为GET)
2013/04/02 Javascript
js 获取radio按钮值的实例
2013/08/17 Javascript
JavaScript使用cookie实现记住账号密码功能
2015/04/27 Javascript
jquery实现的缩略图预览滑块实例
2015/06/25 Javascript
JavaScrip调试技巧之断点调试
2015/10/22 Javascript
javascript图片滑动效果实现
2021/01/28 Javascript
JavaScript 实现的 zip 压缩和解压缩工具包Zip.js使用详解
2015/12/14 Javascript
JavaScript 判断一个对象{}是否为空对象的简单方法
2016/10/09 Javascript
利用js定义一个导航条菜单
2017/03/14 Javascript
JS排序之选择排序详解
2017/04/08 Javascript
Ionic项目中Native Camera的使用方法
2017/06/07 Javascript
JavaScript实现的级联算法示例【省市二级联动功能】
2018/12/25 Javascript
JS实现给数组对象排序的方法分析
2019/06/24 Javascript
使用python实现个性化词云的方法
2017/06/16 Python
Python3实现转换Image图片格式
2018/06/21 Python
python3判断url链接是否为404的方法
2018/08/10 Python
python绘制地震散点图
2019/06/18 Python
keras自定义损失函数并且模型加载的写法介绍
2020/06/15 Python
四方通行旅游网:台湾订房、出国旅游
2017/09/20 全球购物
Smashbox英国官网:美国知名彩妆品牌
2017/11/13 全球购物
AutoShack.com加拿大:北美主要的汽车零部件零售商
2019/07/24 全球购物
美国基督教约会网站:ChristianCafe.com
2020/02/04 全球购物
园林技术个人的自我评价
2014/02/15 职场文书
企业道德讲堂实施方案
2014/03/19 职场文书
我们的节日元宵活动方案
2014/08/23 职场文书
模范教师事迹材料
2014/12/16 职场文书
慰问信模板
2015/02/14 职场文书
现场施工员岗位职责
2015/04/11 职场文书
工作态度怎么写
2015/06/25 职场文书
秋季运动会加油词
2015/07/18 职场文书
zabbix自定义监控nginx状态实现过程
2021/11/01 Servers