深入理解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.blockUI.js上传滚动等待效果实现思路及代码
Mar 18 Javascript
如何用JavaScript动态呼叫函数(两种方式)
May 03 Javascript
JS中数组Array的用法示例介绍
Feb 20 Javascript
使用AngularJS实现可伸缩的页面切换的方法
Jun 19 Javascript
js 上传文件预览的简单实例
Aug 16 Javascript
Bootstrap复选框和单选按钮美化插件(推荐)
Nov 23 Javascript
基于JavaScript实现移动端无限加载分页
Mar 27 Javascript
Vue组件通信实践记录(推荐)
Aug 15 Javascript
vue项目webpack中Npm传递参数配置不同域名接口
Jun 15 Javascript
浅谈在不使用ssr的情况下解决Vue单页面SEO问题(2)
Nov 08 Javascript
vue-for循环嵌套操作示例
Jan 28 Javascript
npx create-react-app xxx创建项目报错的解决办法
Feb 17 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
给apache2.2加上mod_encoding模块後 php5.2.0 处理url出现bug
2007/04/12 PHP
php下网站防IP攻击代码,超级实用
2010/10/24 PHP
Laravel 自动生成验证的实例讲解:login / logout
2019/10/14 PHP
超简单的jquery的AJAX用法
2010/05/10 Javascript
实现web打印的各种方法介绍及实现代码
2013/01/09 Javascript
jQuery渐变发光导航菜单的实例代码
2013/03/27 Javascript
jQuery获得内容和属性方法及示例
2013/12/02 Javascript
兼容主流浏览器的iframe自适应高度js脚本
2014/01/10 Javascript
jquery动态改变div宽度和高度
2015/02/09 Javascript
jquery中添加属性和删除属性
2015/06/03 Javascript
js获取及判断键盘按键的方法
2015/12/01 Javascript
jQuery实现ToolTip元素定位显示功能示例
2016/11/23 Javascript
原生JS简单实现ajax的方法示例
2016/11/29 Javascript
vuejs简单验证码功能完整示例
2019/01/08 Javascript
JavaScript Math对象和调试程序的方法分析
2019/05/13 Javascript
[02:12]Dota 2 推出全新英雄—— 电炎绝手
2019/08/23 DOTA
TensorFlow实现卷积神经网络
2018/05/24 Python
利用Python如何将数据写到CSV文件中
2018/06/05 Python
python re模块的高级用法详解
2018/06/06 Python
Django中的ajax请求
2018/10/19 Python
利用Python将文本中的中英文分离方法
2018/10/31 Python
Pytorch 定义MyDatasets实现多通道分别输入不同数据方式
2020/01/15 Python
python pprint模块中print()和pprint()两者的区别
2020/02/10 Python
HTML5中如何显示视频呢 HTML5视频播放demo
2013/06/08 HTML / CSS
斯洛伐克时尚服装网上商店:Cellbes
2016/10/20 全球购物
橄榄树药房:OLIVEDA
2019/09/01 全球购物
一夜的工作教学反思
2014/02/08 职场文书
教师岗位聘任书范文
2014/03/29 职场文书
小学班主任事迹材料
2014/12/17 职场文书
八年级上册语文教学计划
2015/01/22 职场文书
2016年秋季开学典礼新闻稿
2015/11/25 职场文书
汽车销售合同文本
2019/08/08 职场文书
行政后勤人员工作计划应该怎么写?
2019/08/16 职场文书
浅谈react useEffect闭包的坑
2021/06/08 Javascript
Jmerte 分布式压测及分布式压测配置
2022/04/30 Java/Android
html中两种获取标签内的值的方法
2022/06/16 jQuery