深入理解vue-loader如何使用
.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>
语言块
- 默认语言：html
- 每个*.vue最多包含一个块
- 块中的内容作为字符串提取出来
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>
- 子组件的根节点会受到父组件和本组件的局部css样式影响
- partials are not affected by scoped styles.
- 有了局部样式仍然需要类选择器
- 在包含迭代组件的组件中小心使用子孙选择器。一条关于.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-cli搭建项目，自带了热加载。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。
上一篇： vue实现一个移动端屏蔽滑动的遮罩层实例
下一篇： 纯JS实现只能输入数字的简单代码
推荐阅读
-
深入理解ThreadLocal工作原理及使用示例
-
深入理解Python中字典的键的使用
-
深入理解ob_flush和flush的区别(ob_flush()与flush()使用方法)_PHP教程
-
深入理解ob_flush和flush的区别(ob_flush()与flush()使用方法)_PHP
-
php 深入理解strtotime函数的使用详解
-
深入理解react-router@4.0 使用和源码解析
-
MyBatis——dao代理的使用、深入理解参数（传递一个参数、传递多个参数、使用entity实体类传递、使用自定义类传递、按位置传递、使用Map传递）
-
如何理解C指针及二级指针（1）：二级指针的使用方式
-
php 深入理解strtotime函数的使用详解
-
深入理解mysql之left join 使用详解