vue-loader 学习总结

vue-loader 是一个webpack 的loader，并且vue-loader的特性：

• ES2015 默认支持;
• 允许对 Vue 组件的组成部分使用其它 Webpack loaders，比如对 <style> 使用 SASS 和对 <template> 使用 Jade；
• .vue 文件中允许自定义节点，然后使用自定义的 loader 处理他们；
• 把 <style> 和 <template> 中的静态资源当作模块来对待，并使用 Webpack loaders 进行处理；
• 对每个组件模拟出 CSS 作用域；
• 支持开发期组件的热重载。

创建一个vue-loader项目的命令，使用vue-cli来创建vue-loader项目:

npm install -g vue-cli

vue init webpack-simple vue-test(项目名称)

cd vue-test

npm install

npm run dev

vue-loader 

css注意

style 中可以有属性scoped 也可以没有 当加入scoped属性时，style中的css 只作用于当前的组件元素中，但是对于属性的样式如：p{color: red} 在作用域中性能会比class .class{color: red} 的样式要慢很多

在递归组件中小心使用后代选择器! 对于带有选择器 .a .b 的CSS 规则，如果元素 .a 包含递归子组件，所有的子组件中的 .b 会被匹配。

一个组件中可以有多个style标签

css模块，使用module 属性，在组件的class中可以使用$style这个计算属性 如：<p :class=$style.blue></p> 也可以使用对象／数组。如：< p :class="[$style.blue, $style.yellow]"></p>  < p :class="{ [$style.red]: isRed }"></p>  

 

热重载，启用热重载后，当你修改 .vue 文件时，所有该组件的实例会被替换，并且不需要刷新页面。

 

转载于:https://www.cnblogs.com/Devilwx/p/7212064.html