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 相关文章推荐
JavaScript接口实现代码 (Interfaces In JavaScript)
Jun 11 Javascript
用jquery设置按钮的disabled属性的实现代码
Nov 28 Javascript
Jquery插件 easyUI属性汇总
Jan 19 Javascript
解决html按钮切换绑定不同函数后点击时执行多次函数问题
May 14 Javascript
jQuery数据类型小结(14个)
Jan 08 Javascript
KnockoutJS 3.X API 第四章之事件event绑定
Oct 10 Javascript
AngularJS实现使用路由切换视图的方法
Jan 24 Javascript
Bootstrap表单使用方法详解
Feb 17 Javascript
AngularJS动态菜单操作指令
Apr 25 Javascript
通过vue-cli来学习修改Webpack多环境配置和发布问题
Dec 22 Javascript
Vue组件的使用及个人理解与介绍
Feb 09 Javascript
vue-cli webpack配置文件分析
May 20 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
PHP中的string类型使用说明
2010/07/27 PHP
PHP 获取指定地区的天气实例代码
2017/02/08 PHP
php批量转换文件夹下所有文件编码的函数类
2017/08/06 PHP
JavaScript控制Session操作方法
2013/01/17 Javascript
textarea不能通过maxlength属性来限制字数的解决方法
2014/09/01 Javascript
js实现精美的图片跟随鼠标效果实例
2015/05/16 Javascript
JS与jQuery遍历Table所有单元格内容的方法
2015/12/07 Javascript
JS函数定义方式的区别介绍
2016/03/22 Javascript
jQuery的ready方法实现原理分析
2016/10/26 Javascript
移动端手指放大缩小插件与js源码
2017/05/22 Javascript
JS实现不用中间变量temp 实现两个变量值得交换方法
2018/02/04 Javascript
js闭包学习心得总结
2018/04/17 Javascript
layui的表单验证支持ajax判断用户名是否重复的实例
2019/09/06 Javascript
详谈vue中router-link和传统a链接的区别
2020/07/22 Javascript
[05:46]DOTA2英雄梦之声_第18期_陈
2014/06/20 DOTA
python基础教程之lambda表达式使用方法
2014/02/12 Python
python数据结构链表之单向链表(实例讲解)
2017/07/25 Python
python实现简单中文词频统计示例
2017/11/08 Python
python中的闭包函数
2018/02/09 Python
python使用RNN实现文本分类
2018/05/24 Python
Python通过for循环理解迭代器和生成器实例详解
2019/02/16 Python
python flask web服务实现更换默认端口和IP的方法
2019/07/26 Python
python tkinter图形界面代码统计工具
2019/09/18 Python
python、Matlab求定积分的实现
2019/11/20 Python
python 实现一个反向单位矩阵示例
2019/11/29 Python
Python的形参和实参使用方式
2019/12/24 Python
Tensorflow设置显存自适应,显存比例的操作
2020/02/03 Python
利用python+ffmpeg合并B站视频及格式转换的实例代码
2020/11/24 Python
css3的动画特效之动画序列(animation)
2017/12/22 HTML / CSS
晚会邀请函范文
2014/01/24 职场文书
翻译学院毕业生自荐书
2014/02/02 职场文书
《王二小》教学反思
2014/02/27 职场文书
公司授权委托书
2014/04/04 职场文书
个人担保书格式范文
2014/05/12 职场文书
新闻发布会活动策划方案
2014/09/15 职场文书
golang 接口嵌套实现复用的操作
2021/04/29 Golang