深入理解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 相关文章推荐
js中更短的 Array 类型转换
Oct 30 Javascript
js格式化货币数据实现代码
Sep 04 Javascript
js+css实现有立体感的按钮式文字竖排菜单效果
Sep 01 Javascript
简单谈谈node.js 版本控制 nvm和 n
Oct 15 Javascript
写jQuery插件时的注意点
Feb 20 Javascript
JS+HTML5 FileReader对象用法示例
Apr 07 Javascript
node.js(express)中使用Jcrop进行图片剪切上传功能
Apr 21 Javascript
详解从买域名到使用pm2部署node.js项目全过程
Mar 07 Javascript
react.js组件实现拖拽复制和可排序的示例代码
Aug 20 Javascript
vue项目引入字体.ttf的方法
Sep 28 Javascript
vue使用v-for实现hover点击效果
Sep 29 Javascript
详解从react转职到vue开发的项目准备
Jan 14 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图片处理之图片旋转和图片翻转实例
2014/11/19 PHP
php字符串分割函数用法实例
2015/03/17 PHP
thinkPHP查询方式小结
2016/01/09 PHP
简单时间提示DEMO从0开始一直进行计时
2013/11/19 Javascript
javascript/jquery获取地址栏url参数的方法
2014/03/05 Javascript
javascript实现的平方米、亩、公顷单位换算小程序
2014/08/11 Javascript
js构造函数、索引数组和属性的实现方式和使用
2014/11/16 Javascript
javascript动态创建表格及添加数据实例详解
2015/05/13 Javascript
jquery实现可自动收缩的TAB网页选项卡代码
2015/09/06 Javascript
分享有关jQuery中animate、slide、fade等动画的连续触发、滞后反复执行的bug
2016/01/10 Javascript
jQuery中Ajax全局事件引用方式及各个事件(全局/局部)执行顺序
2016/06/02 Javascript
jQGrid Table操作列中点击【操作】按钮弹出按钮层的实现代码
2016/12/05 Javascript
JavaScript运动框架 多物体任意值运动(三)
2017/05/17 Javascript
Webpack优化配置缩小文件搜索范围
2017/12/25 Javascript
浅谈vuepress 踩坑记
2018/04/18 Javascript
JSON是什么?有哪些优点?JSON和XML的区别?
2019/04/29 Javascript
深入剖析JavaScript instanceof 运算符
2019/06/14 Javascript
Python进行数据科学工作的简单入门教程
2015/04/01 Python
python中字符串变二维数组的实例讲解
2018/04/03 Python
Python3导入自定义模块的三种方法详解
2018/04/13 Python
matplotlib 纵坐标轴显示数据值的实例
2018/05/25 Python
利用Python模拟登录pastebin.com的实现方法
2019/07/12 Python
Python列表(list)所有元素的同一操作解析
2019/08/01 Python
pycharm新建Vue项目的方法步骤(图文)
2020/03/04 Python
python中time、datetime模块的使用
2020/12/14 Python
世界上最大的各式箱包网络零售店:eBag
2016/07/21 全球购物
美国高级工作服品牌:Carhartt
2018/01/25 全球购物
英国马匹装备和马术用品购物网站:Equine Superstore
2019/03/03 全球购物
高级3D打印市场:Gambody
2019/12/26 全球购物
程序员机试试题汇总
2012/03/07 面试题
客户代表自我评价范例
2013/09/24 职场文书
项目经理岗位职责
2013/11/11 职场文书
后勤部长岗位职责
2013/12/14 职场文书
《三个小伙伴》教学反思
2014/04/11 职场文书
关于晚自习早退的检讨书
2014/09/13 职场文书
村级干部党员公开承诺事项
2015/05/04 职场文书