首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

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 ，热加载自动启用。

总结

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

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

- Author -

Terry√

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
Jquery cookie操作代码
Mar 14 Javascript
js中使用DOM复制（克隆）指定节点名数据到新的XML文件中的代码
Jul 27 Javascript
javaScript array(数组)使用字符串作为数组下标的方法
Nov 19 Javascript
JavaScript怎么判断图片是否加载完成以便获取其尺寸
May 08 Javascript
JQuery简单实现锚点链接的平滑滚动
May 03 Javascript
老生常谈JavaScript中的this关键字
Oct 01 Javascript
在js中做数字字符串补0(js补零)
Mar 25 Javascript
自定义PC微信扫码登录样式写法
Dec 12 Javascript
使用vue + less 实现简单换肤功能的示例
Feb 21 Javascript
Js中将Long转换成日期格式的实现方法
Jun 05 Javascript
JavaScript如何借用构造函数继承
Nov 06 Javascript
JS实现网页时钟特效
Mar 25 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
记事本(1) Navicat(1) maven(2) Android Gradle(1) 自定义函数(1) Spring Security(2) Kotlin(1) AOP(2) 动态权限(1) V Rising(1)
You might like
用sql命令修改数据表中的一个字段为非空(not null)的语句
2010/06/04 PHP
php设置编码格式的方法
2013/03/05 PHP
PHP实现加密文本文件并限制特定页面的存取的效果
2016/10/21 PHP
php 人员权限管理(RBAC)实例(推荐)
2017/05/24 PHP
PHP 爬取网页的主要方法
2018/07/13 PHP
Yii Framework框架开发微信公众平台示例
2020/04/26 PHP
张孝祥JavaScript学习阶段性总结(2)--(X)HTML学习
2007/02/03 Javascript
javascript据option的value值快速设定初始的selected选项
2007/08/13 Javascript
用Jquery实现多级下拉框无刷新的联动
2010/12/22 Javascript
jquery.pagination.js 无刷新分页实现步骤分享
2012/05/23 Javascript
得到jQuery detach()后节点中的某个值实现代码
2013/02/05 Javascript
jquery中通过父级查找进行定位示例
2013/06/28 Javascript
Javascript alert消息换行的方法
2013/08/07 Javascript
JavaScript Array对象详解
2016/03/01 Javascript
详解JavaScript树结构
2017/01/09 Javascript
js编写选项卡效果
2017/05/23 Javascript
vue 1.x 交互实现仿百度下拉列表示例
2017/10/21 Javascript
详解Vue 全局变量，局部变量
2019/04/17 Javascript
详解如何写出一个利于扩展的vue路由配置
2019/05/16 Javascript
微信小程序顶部导航栏可滑动并选中放大
2019/12/05 Javascript
2019最新21个MySQL高频面试题介绍
2020/02/06 Javascript
在js文件中引入（调用）另一个js文件的三种方法
2020/09/11 Javascript
Openlayers显示地理位置坐标的方法
2020/09/28 Javascript
Python实现字符串格式化输出的方法详解
2017/09/20 Python
浅谈python配置与使用OpenCV踩的一些坑
2018/04/02 Python
PyQt5每天必学之关闭窗口
2018/04/19 Python
python指定写入文件时的编码格式方法
2018/06/07 Python
删除DataFrame中值全为NaN或者包含有NaN的列或行方法
2018/11/06 Python
深度辨析Python的eval()与exec()的方法
2019/03/26 Python
python实现五子棋程序
2020/04/24 Python
Python绘制动态水球图过程详解
2020/06/03 Python
德国机车企业：FC-Moto
2017/10/27 全球购物
大学生自我鉴定
2013/12/16 职场文书
项目合作意向书范本
2014/04/01 职场文书
个人四风问题对照检查材料
2014/10/01 职场文书
html5调用摄像头实例代码
2021/06/28 HTML / CSS