Vue-loader 是什么?
vue-loader
是一个加载器,能把如下格式的 Vue 组件转化成JavaScript模块。vue-loader
提供了一些非常酷炫的特性:
- ES2015默认可用;
- 在每个 Vue 组件内支持其他的 Webpack 加载器,如用于
<style>
的 SASS 和用于<template>
的 Jade。 - 把
<style>
和<template>
内引用的静态资源作为模块依赖项对待,并用Webpack 加载器处理。 - 对每个组件模拟有作用域的CSS。
- 开发阶段支持组件的热加载。
简单来说,webpack 和 vue-loader 的组合为你创作Vue应用的一个更先进、更灵巧的极其强大的前端开发模式。
Webpack 是什么?
如果你熟悉 Webpack 那就跳过这部分吧,但对于那些新手们,请看下这个简单介绍吧:
Webpack 是一个模块打包工具。在开发中,它把一堆文件中每个都作为一个模块处理,找出它们间的依赖关系,并打包成待发布的静态资源。
列举一个基本例子,设想我们有一堆的 CommonJS 的引用。它们是不能在浏览器直接运行,所以需要把它们 捆绑 成 <script>
标记内的单一文件。Webpack 就能按照 require()
调用的依赖关系为我们做到这点。
实际上,Webpack 能做的更多,通过 "loaders"
我们能让 Webpack 按照我们想要的任何方式打包输出。例如:
-
编译 ES2015、CoffeeScript 或 TypeScript 模块成 ES5 CommonJS 的模块;
-
编译之前,可以通过 linter 校验源代码。
-
编译 Jade 模板成 HTML 并内联 JavaScript 字符串。
-
编译 SASS 文件成 CSS,然后把生成的CSS插入到
<style>
标签内,然后再转译成 JavaScript 代码段。 -
处理在 HTML 或 CSS 文件中引用的图片文件,根据配置路径把它们移动到任意位置,根据 MD5 hash 命名。
-
如果你学会了Webpack,就会知道它有多么强大,它非常显著地改善你前端开发的效率。它主要的缺点是配置方式有点麻烦,但是有了我这份使用指南,那使用
Webpack + Vue + vue-loader
的时候,基本上就扫清了大多数障碍了。
Vue 组件规格
*.vue
文件是用户用 HTML-like 的语法编写的 Vue 组件。每个 *.vue
文件都包括三部分 <template>
, <script>
和 <style>
:
<template>
<div class="example">{{ msg }}</div>
</template>
<script>exportdefault{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 。 如果你还不熟悉这个新语言的话,最好去学一下:
这里是一个引用其他 Vue 组件的典型模式,
<script>import ComponentA from'./ComponentA.vue'import ComponentB from'./ComponentB.vue'exportdefault{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>
-
父组件的有作用域的CSS和子组件的有作用域的CSS将同时影响子组件。
-
有作用域的样式对其他部分没有影响。
-
有作用域限定的样式不排除类的需要. 由于浏览器渲染方式支持多种不同的CSS选择器,加了作用域的
p { color: red }
会慢好多倍 (即,和属性选择器组合时候的时候)。如果你用类或者id选择器,比如.example { color: red }
,你就能消除性能损失。这里有个练习场 ,你可以比较测试下其中的差异。 -
在递归组件中小心后代选择器! 对于 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-cli
,热加载自动启用。
相关推荐
Vue-loader 是 Vue.js 生态系统中的一个重要组件,它允许我们处理和编译 .vue 文件,这些文件是 Vue 项目中常见的单文件组件(Single File Components,简称 SFCs)。在这个配置vue-loader的案例中,我们将深入探讨...
Vue Loader 是一个 webpack 的 loader,它允许你以一种名为单文件组件 (SFCs)的格式撰写 Vue 组件: http-vue-loader 这套工具可提供开发者直接在网页环境中载入 .Vue File,无需透过 nodeJS 环境编译,也不需要 ...
在Vue的应用中,`vue-router`是官方维护的路由管理器,而`vue-loader`则是一个用于加载Vue组件的Webpack加载器。结合使用这两个工具,我们可以实现单页面应用程序(SPA)中的路由导航和组件模块化。 1. **Vue-...
在html(非单页vue项目)中直接引入vue文件组件
vue-文件上传 vue1.x版本可安装vue-file-upload@0.0.7版本vue2.x版本可安装当前最新版本vue.js ,vue-loader 上传文件,vue-file-upload 代码里面包含demo,运行yarn install && yarn start安装npmnpm install --...
一个简单的 Webpack + vue-loader 设置,用于快速进行原型设计。webpack-简单一个简单的 Vue 2.0 Webpack 和vue-loader设置,用于快速进行原型设计。请注意,此模板不适合生产 - 为此,您可能需要使用完整的 webpack...
在【vue-multifile-loader-master】压缩包中,包含了源代码、示例项目、文档以及测试用例。你可以通过阅读源代码来了解其实现原理,通过示例项目快速上手使用,查阅文档获取详细配置信息,还可以运行测试用例验证其...
Vue、vue-router、Webpack 和 vue-loader设置npm installnpm run dev访问本地主机:8080如果你想在手机上查看npm run ip访问你本地的ip:9000版本控制,打包压缩苹果npm run mb视窗npm run wb内容结构│ .gitignore # ...
"深入理解vue-loader如何使用" vue-loader是webpack下loader插件,能够将.vue文件输出成组件。下面将深入了解vue-loader的使用和原理。 vue-loader的基本概念 vue-loader是webpack loader插件,能够将.vue文件...
md-vue-loader md-vue-loader是一个Webpack加载器,用于将Markdown文件作为Vue组件导入。 :person_raising_hand: 为什么? :raising_hands: 从与Vue公司的任何版本兼容解耦( / vue-template-compiler )! :...
答:通过vue-loader,解析.vue文件,在webpack解析,拆解vue组件 1、vue-loader做了什么? vue-loader是一个webpack加载器,这是vue组件的格式: ... [removed] ... [removed] <style> ... </style...
在介绍Vue-loader中CSS Scoped的实现原理之前,我们首先需要了解CSS Scoped的作用。在Vue单文件组件中,给style标签添加一个scoped属性后,即可使得该样式只作用于当前组件内的DOM元素。这种做法提高了样式的封装性...
http-vue-loader.js
功能齐全的 Webpack + vue-loader 设置,具有热重载、linting、测试和 css 提取功能。vue-webpack-样板功能齐全的 Webpack 设置,具有热重载、保存时检查、单元测试和 CSS 提取功能。此模板与 Vue 2.0 兼容。对于 ...
vue-style-loader, web service的样式加载器模块 这是一个基于风格的加载器插件的。 style-loader 类似,你可以在 css-loader 之后将它的链接到文档,以将CSS作为样式标记动态插入到文档中。 但是,由于它作为依赖项...
Vue.js 是一款轻量级的前端框架,Vue Loader 是 Webpack 用于处理 Vue.js 单文件组件(Single File Components, SFCs)的专用加载器。在本项目中,我们将探讨如何通过 Webpack 配置来实现 Vue Loader 插件,以便在 ...
"vux-loader:入侵vue-loader"这个标题暗示了一个专门针对Vue.js应用的Webpack加载器——vux-loader。Vux(Vue UI)是一个基于Vue.js的组件库,主要服务于移动Web应用。vux-loader则是为了解决在使用Vux时的一些特殊...
npm install markdown-to-vue-loader vue-loader webpack --save-dev 用法 在您的webpack配置对象中,您需要将markdown-to-vue-loader添加到模块列表中,如下所示: module: { rules : [ { test : / \. md $ / ,...
Vue-loader的TypeScript加载器在Vue-loader中键入检查脚本。 在vue的SFC中更轻松地导入.ts文件。 入门教程和考试Vue-loader的TypeScript加载器在Vue-loader中键入检查脚本的类型。 在vue的SFC中更轻松地导入.ts文件...
标题日期标签vue-loader源码解析2019-06-11 15:47:33 -0700初步知识vue-loader基本知识vue-loader作用:允许您以一种称为单一文件组件(SFC)的格式编写Vue组件block(块):vue组件里包含template , script , ...