Vue + Webpack + Vue-loader学习教程之功能介绍篇


Posted in Javascript onMarch 14, 2017

Vue-loader 是什么?

vue-loader 是一个加载器,能把如下格式的 Vue 组件转化成JavaScript模块。

Vue + Webpack + Vue-loader学习教程之功能介绍篇

vue-loader 提供了一些非常酷炫的特性:

  1. ES2015默认可用;
  2. 在每个 Vue 组件内支持其他的 Webpack 加载器,如用于<style>的 SASS 和用于<template> 的 Jade。
  3. 把 <style> 和 <template> 内引用的静态资源作为模块依赖项对待,并用Webpack 加载器处理。
  4. 对每个组件模拟有作用域的CSS。
  5. 开发阶段支持组件的热加载。

简单来说,webpack 和 vue-loader 的组合为你创作Vue应用的一个更先进、更灵巧的极其强大的前端开发模式。

Webpack 是什么?

如果你熟悉 Webpack 那就跳过这部分吧,但对于那些新手们,请看下这个简单介绍吧:

Webpack 是一个模块打包工具。在开发中,它把一堆文件中每个都作为一个模块处理,找出它们间的依赖关系,并打包成待发布的静态资源。

Vue + Webpack + Vue-loader学习教程之功能介绍篇

列举一个基本例子,设想我们有一堆的 CommonJS 的引用。它们是不能在浏览器直接运行,所以需要把它们 捆绑 成 <script> 标记内的单一文件。Webpack 就能按照 require() 调用的依赖关系为我们做到这点。

实际上,Webpack 能做的更多,通过 "loaders" 我们能让 Webpack 按照我们想要的任何方式打包输出。例如:

  1. 编译 ES2015、CoffeeScript 或 TypeScript 模块成 ES5 CommonJS 的模块;
  2. 编译之前,可以通过 linter 校验源代码。
  3. 编译 Jade 模板成 HTML 并内联 JavaScript 字符串。
  4. 编译 SASS 文件成 CSS,然后把生成的CSS插入到 <style> 标签内,然后再转译成 JavaScript 代码段。
  5. 处理在 HTML 或 CSS 文件中引用的图片文件,根据配置路径把它们移动到任意位置,根据 MD5 hash 命名。
  6. 如果你学会了Webpack,就会知道它有多么强大,它非常显著地改善你前端开发的效率。它主要的缺点是配置方式有点麻烦,但是有了我这份使用指南,那使用 Webpack + Vue + vue-loader 的时候,基本上就扫清了大多数障碍了。

Vue 组件规格

*.vue 文件是用户用 HTML-like 的语法编写的 Vue 组件。每个 *.vue 文件都包括三部分 <template>, <script> 和 <style>:

<template>
 <div class="example">{{ msg }}</div>
</template>
<script>
export default {
 data () {
 return {
 msg: 'Hello world!'
 }
 }
}
</script>
<style>
.example {
 color: red;
}
</style>

vue-loader 解析文件,提取每个语言块,让他们通过需要的其他 loaders ,最后组装起来,放回 CommonJS 的模块,此模块的 module.exports 就是个 Vue.js 组件对象。

vue-loader 默认用没有用语言编译器,想CSS 预编译和HTML模板编译语言等,如果想用这些功能,需要设置 lang 属性的来实现。例如,你可以在组件的样式中这样用 SASS :

<style lang="sass">
 /* 编写 SASS! */
</style>

更多细节查看 [使用预编译器]。

语言块

<template>

  • 默认语言:html 。
  • 每个 *.vue 文件几乎都包含一个 <template> 块。
  • <template> 内的内容字符串会被提取出来,用来编译进 Vue 组件内的 template 选项。

<script>

  • 默认语言:js(默认ES2015也会通过Babel支持)。
  • 每个 *.vue 文件几乎都包含一个 <script> 块。
  • 脚本就像在CommonJS的环境中一样被执行(就像通过WebPACK中捆绑一个正常的.js模块)。就是说你可以 require() 其他的依赖项。由于默认支持 ES2015 ,你也可以用 import 和 export 语法。
  • 该脚本必须导出一个 Vue.js 组件选项对象,也支持导出一个用 Vue.extend() 创建的扩展构造函数,但首先是导出普通对象。

<style>

  • 默认语言:css。
  • 每个 *.vue 文件支持多个 <style> 标签。
  • 默认,会通过 style-loader 把内容提取并加载到文档的 <head> 内的 <style> 标签内。这也是可以[通过配置 Webpack 使组件内所有样式提取到一个单一的CSS文件]。

Src Imports

如果你喜欢把你的 *.vue 组件拆分成多个文件,那么你可以用 src 属性导入外部文件,代码如下:

<template src="./template.html"></template>
<style src="./style.css"></style>
<script src="./script.js"></script>

需要注意的是 src 导入要遵循和 CommonJS 的 require() 调用一样的路径解析规则,这就是说你需要用以 ./ 开头的相对路径,并且你可以直接从已安装的 NPM 包内导入资源,例如:

<!-- 从已安装的 "todomvc-app-css" NPM 包内导入文件 -->
<style src="todomvc-app-css/index.css">

语法高亮显示

开发中的第一件事,你可能想让 *.vue 组件能高亮显示。现阶段,在 Sublime Text , Atom , Vim , Visual Studio Code , Brackets ,和 JetBrains products (WebStorm,PhpStorm,等)都有支持语法高亮显示的插件。如果在 Vue 组件内没有使用任何预编译器,那么编辑器就把 *.vue 文件当成普通的 HTML 文件一样。

注释

在每个代码块内,注释的时候,需要使用各自语言的注释语法去注释(HTML、CSS、JavaScript、Jade 等)。在文件最顶部注释的时候用HTML的注释语法:<!— 在这里写注释的内容 --> 。

项目设置

语法高亮

开发中的第一件事,你可能想让 *.vue 组件能高亮显示。现阶段,在 Sublime Text , Atom , Vim , Visual Studio Code , Brackets ,和 JetBrains products (WebStorm,PhpStorm,等)都有支持语法高亮显示的插件。如果在 Vue 组件内没有使用任何预编译器,那么编辑器就把 *.vue 文件当成普通的 HTML 文件一样。

使用 vue-cli

创建项目的时候推荐使用脚手架工具,可以用 vue-loader 和 vue-cli,命令行如下:

npm install -g vue-cli
vue init webpack-simple hello-vue
cd hello-vue
npm install
npm run dev # 一切就绪!

ES2015

当 vue-loader 检测到 babel-loader 或者 buble-loader 在项目中存在的时候,将会用它们去处理所有 *.vue 文件的 <script> 部分,所以我们就可以在 Vue 组件中用 ES2015 。 如果你还不熟悉这个新语言的话,最好去学一下:

  • Babel - Learn ES2015
  • ES6 Features
  • Exploring ES6 (book)

这里是一个引用其他 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, 所以你就能在模板中引入组件 <component-a> 。

转译正常的 .js 文件

由于 vue-loader 只能处理 *.vue 文件,你需要在配置文件中告诉 Webpack 用 babel-loader 或者 buble-loader 。这点,可以用项目脚手架工具 vue-cli 。

用 .babelrc 文件来配置 Babel

.babelrc 可以控制 babel-loader ,并推荐这种方式来配置 Babel 预设插件。

Scoped CSS

当 <style> 标签有 scoped 属性的时候,它的 CSS 就只能作用于当前的组件。这就像样式被封装在 Shadow DOM 内。这是用 PostCSS 转译实现的。如下:

<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>

注意

在同一组件内,你能同时用有作用域和无作用域的样式:

<style>
 /* global styles */
</style>

<style scoped>
 /* local styles */
</style>
  1. 父组件的有作用域的CSS和子组件的有作用域的CSS将同时影响子组件。
  2. 有作用域的样式对其他部分没有影响。
  3. 有作用域限定的样式不排除类的需要. 由于浏览器渲染方式支持多种不同的CSS选择器,加了作用域的 p { color: red } 会慢好多倍 (即,和属性选择器组合时候的时候)。如果你用类或者id选择器,比如 .example { color: red } ,你就能消除性能损失。这里有个练习场 ,你可以比较测试下其中的差异。
  4. 在递归组件中小心后代选择器! 对于 CSS 规则的选择器 .a .b,如果匹配 .a 的元素内包含一个递归子组件,那么子组件中所有包含 .b 的元素都会被匹配到。

PostCSS

任何通过 vue-loader 处理过的 CSS 都再用 PostCSS重写有作用域限制的 CSS 部分。你也能添加自定义的 PostCSS 插件处理,例如, autoprefixer 或 CSSNext。

在 Webpack 1.x 中的用法如下:

// webpack.config.js
module.exports = {
 // 其他配置...
 vue: {
 // 使用用户自定义的 postcss 插件
 postcss: [require('postcss-cssnext')()]
 }
}

Webpack 2.x 中的用法:

// webpack.config.js
module.exports = {
 // 其他配置...
 plugins: [
 new webpack.LoaderOptionsPlugin({
  vue: {
  // 使用用户自定义插件
  postcss: [require('postcss-cssnext')()]
  }
 })
 ]
}

除了接受插件的数组,postcss 选项也接受:

  • 返回值是插件数组的方法;
  • 包含被传递到PostCSS处理器选项的对象。当你的项目依赖于自定义解析器或编译器的时候,这就会很有用。
postcss: {
 plugins: [...], // list of plugins
 options: {
  parser: sugarss // use sugarss parser
 }
 }

热加载

“热加载” 不只是当你修改了文件简单地重新加载下页面。当启用了热加载功能,编写完 *.vue 文件后,组件的所有的实例对象被替换,而页面并没有重新加载。仍然保持应用原有的状态。这在你调整模板或修改组件样式的时候,大大改善了开发体验。

Vue + Webpack + Vue-loader学习教程之功能介绍篇 

当使用项目的脚手架工具 vue-cli ,热加载自动启用。

总结

好了,以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流,谢谢大家对三水点靠木的支持。

Javascript 相关文章推荐
Prototype RegExp对象 学习
Jul 19 Javascript
jquery 图片Silhouette Fadeins渐显效果
Feb 07 Javascript
为radio类型的INPUT添加客户端脚本(附加实现JS来禁用onClick事件思路代码)
Nov 11 Javascript
使用Firebug对js进行断点调试的图文方法
Apr 02 Javascript
JS调用页面表格导出excel示例代码
Mar 18 Javascript
jQuery中attr()与prop()函数用法实例详解(附用法区别)
Dec 29 Javascript
浅谈js原生拖放
Nov 21 Javascript
jQGrid Table操作列中点击【操作】按钮弹出按钮层的实现代码
Dec 05 Javascript
前端图片懒加载(lazyload)的实现方法(提高用户体验)
Aug 21 Javascript
JavaScript实现京东快递单号查询
Nov 30 Javascript
vue 在服务器端直接修改请求的接口地址
Dec 19 Vue.js
使用原生javascript开发计算器实例代码
Feb 21 Javascript
jQuery插件HighCharts绘制的2D堆柱状图效果示例【附demo源码下载】
Mar 14 #Javascript
jQuery插件HighCharts实现的2D堆条状图效果示例【附demo源码下载】
Mar 14 #Javascript
前端框架学习总结之Angular、React与Vue的比较详解
Mar 14 #Javascript
jQuery ajax实现省市县三级联动
Mar 07 #Javascript
Javascript前端经典的面试题及答案
Mar 14 #Javascript
layer弹出层框架alert与msg详解
Mar 14 #Javascript
微信小程序 仿猫眼实现实例代码
Mar 14 #Javascript
You might like
提问的智慧(2)
2006/10/09 PHP
简单的php 验证图片生成函数
2009/05/21 PHP
php获取指定日期之间的各个周和月的起止时间
2014/11/24 PHP
php对二维数组进行相关操作(排序、转换、去空白等)
2015/11/04 PHP
[原创]图片分页查看
2006/08/28 Javascript
js控制frameSet示例
2013/09/10 Javascript
JavaScript设计模式之策略模式实例
2014/10/10 Javascript
JavaScript实现MIPS乘法模拟的方法
2015/04/17 Javascript
jQuery实现html元素拖拽
2015/07/21 Javascript
JavaScript setTimeout使用闭包功能实现定时打印数值
2015/12/18 Javascript
D3.js封装文本实现自动换行和旋转平移等功能
2016/10/14 Javascript
浅谈AngularJS中ng-class的使用方法
2016/11/11 Javascript
教你一步步用jQyery实现轮播器
2016/12/18 Javascript
Bootstrap和Java分页实例第二篇
2016/12/23 Javascript
node.js操作MongoDB的实例详解
2017/10/11 Javascript
node.js读取Excel数据(下载图片)的方法示例
2018/08/02 Javascript
JavaScript实现单图片上传并预览功能
2019/09/30 Javascript
vue3.0中友好使用antdv示例详解
2021/01/05 Vue.js
使用Python读取大文件的方法
2018/02/11 Python
Python的条件表达式和lambda表达式实例
2019/01/31 Python
Python自动抢红包教程详解
2019/06/11 Python
Python数据结构与算法(几种排序)小结
2019/06/22 Python
python psutil模块使用方法解析
2019/08/01 Python
Pycharm中Python环境配置常见问题解析
2020/01/16 Python
解决Python spyder显示不全df列和行的问题
2020/04/20 Python
美国男女折扣服饰百货连锁店:Stein Mart
2017/05/02 全球购物
匡威荷兰官方网站:Converse荷兰
2018/10/24 全球购物
英语专业毕业生求职信
2014/05/24 职场文书
2014年乡镇妇联工作总结
2014/12/02 职场文书
网络营销计划
2015/01/17 职场文书
无锡灵山大佛导游词
2015/02/09 职场文书
寻找成龙观后感
2015/06/12 职场文书
2016年三严三实党课学习心得体会
2016/01/06 职场文书
学校2016年全国助残日活动总结
2016/04/01 职场文书
2016年第十九届推普周活动总结
2016/04/06 职场文书
Python循环之while无限迭代
2022/04/30 Python