vue-loader是webpack的加载器，允许您以称为单文件组件（SFC）的格式创作Vue组件：
<template>
<div class="example">{{ msg }}</div> </template> <script> export default { data () { return { msg: 'Hello world!' } } } </script> <style> .example { color: red; } </style>有许多很酷的功能提供vue-loader：
- 允许对Vue组件的每个部分使用其他webpack加载器，例如Sass for
<style>和Pug for<template>; - 允许
.vue文件中的自定义块可以应用自定义加载器链; - 处理在模块依赖项中引用的静态资产，
<style>并<template>使用webpack加载器处理它们; - 模拟每个组件的范围CSS;
- 在开发过程中保持国家的热再加载。
简而言之，webpack的组合vue-loader为您提供了一个现代，灵活且极其强大的前端工作流程，用于创作Vue.js应用程序。
Vue的CLI
如果您对手动设置webpack不感兴趣，建议使用Vue CLI构建项目。Vue CLI创建的项目预先配置了大多数开箱即用的常见开发需求。
如果Vue CLI的内置配置不符合您的需要，请遵循本指南，或者您更愿意从头开始创建自己的webpack配置。
＃手动配置
Vue Loader的配置与其他加载器略有不同。除了适用vue-loader于任何带扩展名的文件的规则外，请.vue务必将Vue Loader的插件添加到webpack配置中：
// webpack.config.js
const VueLoaderPlugin = require('vue-loader/lib/plugin') module.exports = { module: { rules: [ // ... other rules { test: /\.vue$/, loader: 'vue-loader' } ] }, plugins: [ // make sure to include the plugin! new VueLoaderPlugin() ] } 这个插件是必需的！它负责克隆您定义的任何其他规则并将它们应用于.vue文件中的相应语言块。例如，如果您有规则匹配/\.js$/，则它将应用于文件中的<script>块.vue。
一个更完整的webpack配置示例如下所示：
// webpack.config.js
const path = require('path') const VueLoaderPlugin = require('vue-loader/lib/plugin') module.exports = { mode: 'development', module: { rules: [ { test: /\.vue$/, loader: 'vue-loader' }, // this will apply to both plain `.js` files // AND `<script>` blocks in `.vue` files { test: /\.js$/, loader: 'babel-loader' }, // this will apply to both plain `.css` files // AND `<style>` blocks in `.vue` files { test: /\.css$/, use: [ 'vue-style-loader', 'css-loader' ] } ] }, plugins: [ // make sure to include the plugin for the magic new VueLoaderPlugin() ] }资产URL处理
当Vue Loader <template>在SFC中编译块时，它还会将遇到的任何资产URL转换为webpack模块请求。
例如，以下模板代码段：
<img src="../image.png"> 将编译成：
createElement('img', { attrs: { src: require('../image.png') // this is now a module request } }) 默认情况下，将转换以下标记/属性组合，并可使用transformAssetUrls选项进行配置。
{
video: ['src', 'poster'], source: 'src', img: 'src', image: 'xlink:href' } 此外，如果您已配置为块使用css-loader，则<style>CSS中的资产URL也将以类似的方式处理。
转换规则
资产URL转换遵循以下规则：
-
如果URL是绝对路径（例如
/images/foo.png），则它将按原样保留。 -
如果URL以＃开头
.，则将其解释为相对模块请求，并根据文件系统上的文件夹结构进行解析。 -
如果URL以...开头
~，则将其解释为模块请求。这意味着您甚至可以引用节点模块内的资产：<img src="~some-npm-package/foo.png"> -
如果URL以
@，它也被解释为模块请求。如果您的webpack配置具有别名@，这非常有用，默认情况下，该别名指向/src由其创建的任何项目vue-cli。
＃相关装载机
因为扩展.png不是JavaScript模块，所以您需要配置webpack以使用file-loader或url-loader来正确处理它们。使用Vue CLI创建的项目已预先配置。
＃为什么
资产URL转换的好处是：
-
file-loader允许您指定复制和放置资产文件的位置，以及如何使用版本哈希命名它以获得更好的缓存。此外，这也意味着您只需将图像放在*.vue文件旁边，并根据文件夹结构使用相对路径，而不必担心部署URL。通过适当的配置，webpack将自动将文件路径重写为捆绑输出中的正确URL。 -
url-loader允许您有条件地将文件内联为base-64数据URL（如果它们小于给定阈值）。这可以减少普通文件的HTTP请求数量。如果文件大于阈值，则会自动回退到file-loader。
使用预处理器
在webpack中，所有预处理器都需要应用相应的加载器。vue-loader允许您使用其他webpack加载器来处理Vue组件的一部分。它将根据lang语言块的属性和webpack配置中的规则自动推断要使用的正确加载器。
＃SASS
例如，要<style>使用SASS / SCSS 编译我们的标记：
npm install -D sass-loader node-sass
在您的webpack配置中：
module.exports = {
module: { rules: [ // ... other rules omitted // this will apply to both plain `.scss` files // AND `<style lang="scss">` blocks in `.vue` files { test: /\.scss$/, use: [ 'vue-style-loader', 'css-loader', 'sass-loader' ] } ] }, // plugin omitted }现在除了能够之外import 'style.scss'，我们还可以在Vue组件中使用SCSS：
<style lang="scss"> /* write SCSS here */ </style> 块中的任何内容都将由webpack处理，就像它在*.scss文件中一样。
＃上海社会科学院VS SCSS
请注意，默认情况下sass-loader处理非基于缩进的scss语法。要使用基于缩进的sass语法，您需要将选项传递给加载器：
// webpack.config.js -> module.rules
{
test: /\.sass$/, use: [ 'vue-style-loader', 'css-loader', { loader: 'sass-loader', options: { indentedSyntax: true } } ] }共享全局变量
sass-loader还支持一个data选项，允许您在所有已处理文件之间共享公共变量，而无需显式导入它们：
// webpack.config.js -> module.rules
{
test: /\.scss$/, use: [ 'vue-style-loader', 'css-loader', { loader: 'sass-loader', options: { // you can also read from a file, e.g. `variables.scss` data: `$color: red;` } } ] }LESS
npm install -D less less-loader
// webpack.config.js -> module.rules
{
test: /\.less$/, use: [ 'vue-style-loader', 'css-loader', 'less-loader' ] }
手写笔
npm install -D stylus stylus-loader
// webpack.config.js -> module.rules
{
test: /\.styl(us)?$/, use: [ 'vue-style-loader', 'css-loader', 'stylus-loader' ] }
PostCSS
小费
Vue Loader v15默认不再适用PostCSS变换。您需要使用PostCSS postcss-loader。
npm install -D postcss-loader
// webpack.config.js -> module.rules
{
test: /\.css$/, use: [ 'vue-style-loader', { loader: 'css-loader', options: { importLoaders: 1 } }, 'postcss-loader' ] } PostCSS的配置可以通过postcss.config.js或postcss-loader选项完成。有关详细信息，请参阅postcss-loader docs。
postcss-loader 也可以与上述其他预处理器结合使用。
＃巴贝尔
npm install -D babel-core babel-loader
// webpack.config.js -> module.rules
{
test: /\.js?$/, loader: 'babel-loader' } Babel的配置可以通过.babelrc或babel-loader选项完成。
＃不包括node_modules
exclude: /node_modules/对于babel-loader适用于.js文件的JS转换规则（例如）通常是常见的。由于v15的推断变化，如果在内部导入Vue SFC node_modules，其<script>部分也将被排除在转换之外。
为了确保将JS转换应用于Vue SFC node_modules，您需要使用exclude函数将它们列入白名单：
{
test: /\.js$/,
loader: 'babel-loader', exclude: file => ( /node_modules/.test(file) && !/\.vue\.js/.test(file) ) } ＃打字稿
npm install -D typescript ts-loader
// webpack.config.js
module.exports = {
resolve: { // Add `.ts` as a resolvable extension. extensions: ['.ts', '.js'] }, module: { rules: [ // ... other rules omitted { test: /\.ts$/, loader: 'ts-loader', options: { appendTsSuffixTo: [/\.vue$/] } } ] }, // ... plugin omitted } TypeScipt的配置可以通过tsconfig.json。另请参阅ts-loader的文档。
帕格
处理模板有点不同，因为大多数webpack模板加载器如pug-loader返回模板函数而不是编译的HTML字符串。pug-loader我们需要使用一个返回原始HTML字符串的加载器，而不是使用，例如pug-plain-loader：
npm install -D pug pug-plain-loader
// webpack.config.js -> module.rules
{
test: /\.pug$/, loader: 'pug-plain-loader' } 然后你可以写：
<template lang="pug"> div h1 Hello world! </template> 如果您还打算使用它.pug在JavaScript中将文件作为HTML字符串导入，则需要raw-loader在预处理加载器之后进行链接。但请注意，添加raw-loader会破坏Vue组件中的使用，因此您需要有两个规则，其中一个使用a定位Vue文件resourceQuery，另一个（回退）定位JavaScript导入：
// webpack.config.js -> module.rules
{
test: /\.pug$/, oneOf: [ // this applies to `<template lang="pug">` in Vue components { resourceQuery: /^\?vue/, use: ['pug-plain-loader'] }, // this applies to pug imports inside JavaScript { use: ['raw-loader', 'pug-plain-loader'] } ] }作用域CSS
当<style>标签具有该scoped属性时，其CSS将仅应用于当前组件的元素。这类似于Shadow DOM中的样式封装。它有一些警告，但不需要任何polyfill。通过使用PostCSS转换以下内容来实现：
<style scoped> .example { color: red; } </style> <template> <div class="example">hi</div> </template> 进入以下：
<style> .example[data-v-f3f3eg9] { color: red; } </style> <template> <div class="example" data-v-f3f3eg9>hi</div> </template> ＃混合本地和全局样式
您可以在同一组件中包含范围和非范围样式：
<style> /* global styles */ </style> <style scoped> /* local styles */ </style> ＃子组件根元素
使用时scoped，父组件的样式不会泄漏到子组件中。但是，子组件的根节点将受父级作用域CSS和子级作用域CSS的影响。这是设计的，以便父级可以设置子根元素的样式以进行布局。
＃深度选择器
如果您希望scoped样式中的选择器“深入”，即影响子组件，则可以使用>>>组合器：
<style scoped> .a >>> .b { /* ... */ } </style> 以上将编译成：
.a[data-v-f3f3eg9] .b { /* ... */ } 某些预处理器（如Sass）可能无法>>>正确解析。在这些情况下，您可以使用/deep/组合器 - 它是别名，>>>并且完全相同。
＃动态生成的内容
创建的DOM内容v-html不受范围样式的影响，但您仍然可以使用深度选择器设置它们的样式。
＃也记住
-
范围样式不会消除类的需要。由于浏览器呈现各种CSS选择器的方式，
p { color: red }在作用域时（即与属性选择器结合时）会慢很多倍。如果您使用类或ID，例如in.example { color: red }，那么您几乎可以消除性能损失。这是一个游乐场，您可以自己测试差异。 -
在递归组件中注意后代选择器！对于带有选择器的CSS规则
.a .b，如果匹配的元素.a包含递归子组件，则.b该子组件中的所有组件都将与规则匹配。
← 简介
CSS模块
CSS模块是用于模块化和组合CSS的流行系统。vue-loader提供与CSS模块的一流集成，作为模拟范围CSS的替代方案。
＃用法
首先，必须通过传递modules: true给css-loader：
// webpack.config.js
{
module: {
rules: [ // ... other rules omitted { test: /\.css$/, use: [ 'vue-style-loader', { loader: 'css-loader', options: { // enable CSS Modules modules: true, // customize generated class names localIdentName: '[local]_[hash:base64:8]' } } ] } ] } } 然后，将module属性添加到您的<style>：
<style module> .red { color: red; } .bold { font-weight: bold; } </style> 该module属性指示Vue Loader将CSS模块locals对象作为具有名称的计算属性注入组件$style。然后，您可以在模板中使用动态类绑定：
<template>
<p :class="$style.red"> This should be red </p> </template> 由于它是一个计算属性，它也可以使用以下对象/数组语法:class：
<template>
<div> <p :class="{ [$style.red]: isRed }"> Am I red? </p> <p :class="[$style.red, $style.bold]"> Red and bold </p> </div> </template> 您还可以从JavaScript访问它：
<script> export default { created () { console.log(this.$style.red) // -> "red_1VyoJ-uZ" // an identifier generated based on filename and className. } } </script> 有关模式详细信息（如全局异常和组合），请参阅CSS模块规范。
＃选择使用
如果您只想在某些Vue组件中使用CSS模块，则可以使用oneOf规则并检查module字符串resourceQuery：
// webpack.config.js -> module.rules
{
test: /\.css$/, oneOf: [ // this matches `<style module>` { resourceQuery: /module/, use: [ 'vue-style-loader', { loader: 'css-loader', options: { modules: true, localIdentName: '[local]_[hash:base64:5]' } } ] }, // this matches plain `<style>` or `<style scoped>` { use: [ 'vue-style-loader', 'css-loader' ] } ] } ＃与预处理器一起使用
CSS模块可以与其他预处理器一起使用：
// webpack.config.js -> module.rules
{
test: /\.scss$/, use: [ 'vue-style-loader', { loader: 'css-loader', options: { modules: true } }, 'sass-loader' ] } ＃自定义进样名称
您可以<style>在单个*.vue组件中包含多个标记。为避免注入样式相互覆盖，可以通过为module属性赋值来自定义注入的计算属性的名称：
<style module="a"> /* identifiers injected as a */ </style> <style module="b"> /* identifiers injected as b */ </style>
热刷新
“Hot Reload”不仅仅是在编辑文件时重新加载页面。启用热重新加载后，在编辑*.vue文件时，将交换该组件的所有实例，而无需重新加载页面。它甚至可以保留您的应用程序和这些交换组件的当前状态！当您调整组件的模板或样式时，这可以显着改善开发体验。
＃州保存规则
-
编辑
<template>组件时，已编辑组件的实例将重新呈现，保留所有当前的私有状态。这是可能的，因为模板被编译成新的渲染函数，不会产生副作用。 -
编辑
<script>组件的一部分时，将销毁并重新创建已编辑组件的实例。（保留应用程序中其他组件的状态）这是因为<script>可能包含可能产生副作用的生命周期钩子，因此需要“重新加载”而不是重新呈现以确保一致的行为。这也意味着您需要注意全局副作用，例如组件生命周期钩子中的计时器。如果您的组件产生全局副作用，有时您可能需要执行整页重新加载。 -
<style>热重载依次运行vue-style-loader，因此不会影响应用程序状态。
＃用法
搭建项目时vue-cli，Hot Reload可以开箱即用。
手动设置项目时，在使用项目服务时会自动启用热重新加载webpack-dev-server --hot。
高级用户可能想要查看内部使用的vue-hot-reload-apivue-loader。
＃禁用热重新加载
除以下情况外，始终启用热重新加载：
- webpack
target是node（SSR） - webpack缩小了代码
process.env.NODE_ENV === 'production'
您可以使用hotReload: false选项明确禁用热重新加载：
module: {
rules: [
{ test: /\.vue$/, loader: 'vue-loader', options: { hotReload: false // disables Hot Reload } } ] }功能组件
在*.vue文件中定义为单文件组件的功能组件也接收适当的模板编译，Scoped CSS和热重载支持。
要表示应编译为功能组件functional的模板，请将该属性添加到模板块。这也允许省略块中的functional选项<script>。
模板中的表达式在功能渲染上下文中进行评估。这意味着需要像props.xxx在模板中一样访问props ：
<template functional> <div>{{ props.foo }}</div> </template> 如果需要访问全局定义的属性Vue.prototype，可以在parent以下位置访问它们：
<template functional> <div>{{ parent.$someProperty }}</div> </template>自定义块
您可以在*.vue文件中定义自定义语言块。应用于自定义块的加载器将根据块的lang属性，块的标记名称以及webpack配置中的规则进行匹配。
如果lang指定了属性，则自定义块将作为文件lang与其扩展名匹配。
您还可以使用resourceQuery匹配自定义块的规则lang。例如，要匹配<foo>自定义块：
{
module: {
rules: [ { resourceQuery: /blockType=foo/, loader: 'loader-to-use' } ] } } 如果为自定义块找到匹配规则，则会对其进行处理; 否则将自动忽略自定义块。
此外，如果自定义块在所有匹配的加载器处理后将函数导出为最终结果，则将使用*.vue文件的组件作为参数调用该函数。
＃例子
下面是将<docs>自定义块注入组件的示例，以便在运行时可用。
为了注入自定义块内容，我们将编写一个自定义加载器：
module.exports = function (source, map) { this.callback( null, `export default function (Component) { Component.options.__docs = ${ JSON.stringify(source) } }`, map ) } 现在我们将配置webpack以使用我们的自定义加载器来<docs>定制块。
// wepback.config.js
module.exports = {
module: { rules: [ { resourceQuery: /blockType=docs/, loader: require.resolve('./docs-loader.js') } ] } } 我们现在能够<docs>在运行时访问块的导入组件的内容。
<!-- ComponentB.vue -->
<template> <div>Hello</div> </template> <docs> This is the documentation for component B. </docs> <!-- ComponentA.vue -->
<template> <div> <ComponentB/> <p>{{ docs }}</p> </div> </template> <script> import ComponentB from './ComponentB.vue'; export default { components: { ComponentB }, data () { return { docs: ComponentB.__docs } } } </script>CSS提取
小费
仅对生产应用CSS提取，以便在开发期间获得CSS热重新加载。
＃的WebPack 4
npm install -D mini-css-extract-plugin
// webpack.config.js
var MiniCssExtractPlugin = require('mini-css-extract-plugin') module.exports = { // other options... module: { rules: [ // ... other rules omitted { test: /\.css$/, use: [ process.env.NODE_ENV !== 'production' ? 'vue-style-loader' : MiniCssExtractPlugin.loader, 'css-loader' ] } ] }, plugins: [ // ... Vue Loader plugin omitted new MiniCssExtractPlugin({ filename: 'style.css' }) ] } 另请参阅mini-css-extract-plugin文档。
＃的WebPack 3
npm install -D extract-text-webpack-plugin
// webpack.config.js
var ExtractTextPlugin = require("extract-text-webpack-plugin") module.exports = { // other options... module: { rules: [ // ... other rules omitted { test: /\.css$/, loader: ExtractTextPlugin.extract({ use: 'css-loader', fallback: 'vue-style-loader' }) } ] }, plugins: [ // ... Vue Loader plugin omitted new ExtractTextPlugin("style.css") ] }Linting
#ESLint
The official eslint-plugin-vue supports linting both the template and script parts of Vue single file components.
Make sure to use the plugin's included config in your ESLint config:
// .eslintrc.js
module.exports = {
extends: [ "plugin:vue/essential" ] } Then from the command line:
eslint --ext js,vue MyComponent.vue
Another option is using eslint-loader so that your *.vue files are automatically linted on save during development:
npm install -D eslint eslint-loader
Make sure it's applied as a pre-loader:
// webpack.config.js
module.exports = {
// ... other options module: { rules: [ { enforce: 'pre', test: /\.(js|vue)$/, loader: 'eslint-loader', exclude: /node_modules/ } ] } } #stylelint
stylelint supports linting style parts of Vue single file components.
Make sure that your stylelint config is right.
Then from the command line:
stylelint MyComponent.vue
Another option is using stylelint-webpack-plugin:
npm install -D stylelint-webpack-plugin
Make sure it's applied as a plugin:
// webpack.config.js
const StyleLintPlugin = require('stylelint-webpack-plugin'); module.exports = { // ... other options plugins: [ new StyleLintPlugin({ files: ['**/*.{vue,htm,html,css,sss,less,scss,sass}'], }) ] }测试
-
Vue CLI提供预配置的单元测试和e2e测试设置。
-
如果您对手动设置
*.vue文件的单元测试感兴趣，请参阅@ vue / test-utils的文档，其中介绍了使用mocha-webpack或Jest进行设置。
3240
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
