vue-loader学习笔记

最新推荐文章于 2024-06-10 14:13:49 发布

小灰小汇

最新推荐文章于 2024-06-10 14:13:49 发布

阅读量244

点赞数

1：vue-loader简介

vue-loader是一个webpack的loader；可以将vue文件转换为JS模块；

2：vue-loader特性

（1）ES2015默认支持
（2）允许对VUE组件的组成部分使用其他webpack loader;比如对< style >使用SASS（编译CSS语言），对< template >使用JADE（jade是一个高性能的模板引擎，用JS实现，也有其他语言的实现—php,scala,yuby,python,java，可以供给node使用）
（3）.vue文件中允许自定义节点，然后使用自定义的loader处理他们
（4）对< style >< template >中的静态资源当做模块来对待，并且使用webpack loaders进行处理
（5）对每个组件模拟出CSS作用域
（6）支持开发期组件的热重载
在编写vue应用程序时，组合使用webpack跟vue-loader能带来一个现代。灵活并且非常强大的前端工作流程；

3：webpack简介

（1）webpack是一个模块打包工具，他可以将一堆文件中的每个文件都作为一个模块；找出他们的依赖关系，将他们打包为可部署的静态资源；
（2）使用webpack的loaders，我们可以配置webpack以任何方式去转换所有类型的文件；例如
A：转换ES2015，CoffeeScript或者TypeScript模块为普通的ES5 CommonJs模块；
B：可以选择在编译之前检验你的源代码；
C：将jade模板转换为纯HTML并且嵌入JS字符串中
D：将SASS文件转换为纯CSS，然后将其转换成JS片段，将生成的CSS作为< style >标签插入页面；
E：处理html或者CSS中引用的图片。移动到配置的路径中，并且使用MD5 hash重命名；
（3）当你理解webpack原理后会感觉到它是这么强大，可以大大的优化你的前端工作流程；缺点是配置比较复杂；

4：VUE组件细则

.vue文件是一个自定义的文件类型，用类HTML语法描述一个vue组件，每个.vue组件包含三种类型的顶级语言快< template>< script>< style>，还允许添加自定义的模块；

<span style="color:#000000"><code><span style="color:#006666"><<span style="color:#4f4f4f">template</span>></span>
  <span style="color:#006666"><<span style="color:#4f4f4f">div</span> <span style="color:#4f4f4f">class</span>=<span style="color:#009900">"example"</span>></span>{{ <span style="color:#4f4f4f">msg</span> }}<span style="color:#006666"></<span style="color:#4f4f4f">div</span>></span>
<span style="color:#006666"></<span style="color:#4f4f4f">template</span>></span>

<span style="color:#006666"><<span style="color:#4f4f4f">script</span>></span>
export <span style="color:#000088">default</span> {
  data () {
    <span style="color:#000088">return</span> {
      msg: <span style="color:#009900">'Hello world!'</span>
    }
  }
}
<span style="color:#006666"></<span style="color:#4f4f4f">script</span>></span>

<span style="color:#006666"><<span style="color:#4f4f4f">style</span>></span>
<span style="color:#9b703f">.example</span> {
  color:<span style="color:#009900"> red</span>;
}
<span style="color:#006666"></<span style="color:#4f4f4f">style</span>></span>

<span style="color:#006666"><<span style="color:#4f4f4f">custom1</span>></span>
  This could be e.g. documentation for the component.
<span style="color:#006666"></<span style="color:#4f4f4f">custom1</span>></span></code></span>

vue-loader会解析文件，提取出每个语言块，如果有必要会通过其他loader处理，最后将他们组装成一个commonjs模块；module.exports出一个vue.js组件对象；
vue-loader支持使用非默认语言，比如CSS预处理器，预编译的HTML模板语言，通过设置语言块的lang属性；例如

<span style="color:#000000"><code><span style="color:#006666"><<span style="color:#4f4f4f">style</span> <span style="color:#4f4f4f">lang</span>=<span style="color:#009900">'sass'</span>></span>
    <span style="color:#880000">/*sass*/</span>
<span style="color:#006666"></<span style="color:#4f4f4f">style</span>></span></code></span>

1：< temlate>语言块
（1）默认语言：html
（2）每个.vue文件最多包含一个< template>块
（3）内容将被提取为字符串，将编译用作VUE组件的template选项；
2：< script>
（1）默认语言：JS（在监测到babel-loader或者buble-loader配置时，自动支持ES2015）
（2）每个.vue文件最多包含一个< script>块
（3）该脚本在类CommonJS环境中执行（就像通过webpack打包的正常JS模块）。所以你可以require()其他依赖。在ES2015支持下，也可以使用import跟export语法
（4）脚本必须导出Vue.js组件对象，也可以导出由VUE.extend()创建的扩展对象；但是普通对象是更好的选择；
3：< style>
（1）默认语言：css
（2）一个.vue文件可以包含多个< style>标签
（3）这个标签可以有 scoped 或者 module属性来帮助你讲样式封装到当前组件；具有不同封装模式的多个< style>标签可以在同一个组件中混合使用
（4）默认情况下，可以使用style-loader提取内容，并且通过< style>标签动态假如文档的< head>中，也可以配置webpack将所有的styles提取到单个CSS文件中；
4：自定义块
可以在.vue文件中添加额外的自定义块来实现项目的特殊需求；例如< docs>块；vue-loader将会使用标签名来查找对应的webpack loaders来应用到对应的模块上；webpack需要在vue-loader的选项loaders中指定；
以上4个模块的导入方式
如果你喜欢分隔你的.vue文件到多个文件中，你可以通过src属性导入外部文件；

<span style="color:#000000"><code><span style="color:#006666"><<span style="color:#4f4f4f">template</span> <span style="color:#4f4f4f">src</span>=<span style="color:#009900">'./template.html'</span>></span><span style="color:#006666"></<span style="color:#4f4f4f">template</span>></span>
<span style="color:#006666"><<span style="color:#4f4f4f">style</span> <span style="color:#4f4f4f">src</span>=<span style="color:#009900">'./style.css'</span>></span><span style="color:#006666"></<span style="color:#4f4f4f">style</span>></span>
<span style="color:#006666"><<span style="color:#4f4f4f">script</span> <span style="color:#4f4f4f">src</span>=<span style="color:#009900">'./script.js'</span>></span><span style="color:#006666"></<span style="color:#4f4f4f">script</span>></span></code></span>

5：ES2015

1：当项目中配置了babel-loader或者buble-loader，vue-loader会使用它们处理所有.vue文件中的< script>部分，允许我们在VUE组件中使用ES2015；如果你还没有使用ES2015，你应该使用它；

<span style="color:#000000"><code><span style="color:#006666"><<span style="color:#4f4f4f">template</span>></span>
    <span style="color:#006666"><<span style="color:#4f4f4f">Component-a</span>></span><span style="color:#006666"><<span style="color:#4f4f4f">Component-a</span>></span>
    <span style="color:#006666"><<span style="color:#4f4f4f">Component-b</span>></span><span style="color:#006666"><<span style="color:#4f4f4f">Component-b</span>></span>
<span style="color:#006666"><<span style="color:#4f4f4f">template</span>></span>
<span style="color:#006666"><<span style="color:#4f4f4f">script</span>></span>
import ComponentA from <span style="color:#009900">'./ComponentA.vue'</span>
import ComponentB from <span style="color:#009900">'./ComponentB.vue'</span>

export <span style="color:#000088">default</span> {
  components: {
    ComponentA,
    ComponentB
  }
}
<span style="color:#006666"></<span style="color:#4f4f4f">script</span>></span></code></span>

2：在 Templates 中使用 ES2015

<span style="color:#000000"><code><span style="color:#006666"><<span style="color:#4f4f4f">li</span> <span style="color:#4f4f4f">v-for</span>=<span style="color:#009900">"{ id, text } in items"</span>></span>
  {{ <span style="color:#4f4f4f">id</span> }} {{ <span style="color:#4f4f4f">text</span> }}
<span style="color:#006666"></<span style="color:#4f4f4f">li</span>></span>
<span style="color:#006666"><<span style="color:#4f4f4f">my-component</span>></span>
  <span style="color:#006666"><<span style="color:#4f4f4f">template</span> <span style="color:#4f4f4f">scope</span>=<span style="color:#009900">"{ id, text }"</span>></span>
    <span style="color:#006666"><<span style="color:#4f4f4f">span</span>></span>{{ <span style="color:#4f4f4f">id</span> }} {{ <span style="color:#4f4f4f">text</span> }}<span style="color:#006666"></<span style="color:#4f4f4f">span</span>></span>
  <span style="color:#006666"></<span style="color:#4f4f4f">template</span>></span>
<span style="color:#006666"></<span style="color:#4f4f4f">my-component</span>></span></code></span>

3：vue-loader只处理.vue文件，你需要告诉webpack如何使用babel-loader或者buble-loader处理.js文件，在webpack中配置babel-loader或者buble-loader；脚手架vue-cli已经为你做了这些；

6：CSS作用域

当

<span style="color:#000000"><code><span style="color:#006666"><<span style="color:#4f4f4f">style</span> <span style="color:#4f4f4f">scoped</span>></span>
<span style="color:#9b703f">.example</span> {
  color:<span style="color:#009900"> red</span>;
}
<span style="color:#006666"></<span style="color:#4f4f4f">style</span>></span>

<span style="color:#006666"><<span style="color:#4f4f4f">template</span>></span>
  <span style="color:#006666"><<span style="color:#4f4f4f">div</span> <span style="color:#4f4f4f">class</span>=<span style="color:#009900">"example"</span>></span>hi<span style="color:#006666"></<span style="color:#4f4f4f">div</span>></span>
<span style="color:#006666"></<span style="color:#4f4f4f">template</span>></span></code></span>

转换结果

<span style="color:#000000"><code><span style="color:#006666"><<span style="color:#4f4f4f">style</span>></span>
<span style="color:#9b703f">.example</span><span style="color:#008800">[data-v-f3f3eg9]</span> {
  color:<span style="color:#009900"> red</span>;
}
<span style="color:#006666"></<span style="color:#4f4f4f">style</span>></span>

<span style="color:#006666"><<span style="color:#4f4f4f">template</span>></span>
  <span style="color:#006666"><<span style="color:#4f4f4f">div</span> <span style="color:#4f4f4f">class</span>=<span style="color:#009900">"example"</span> <span style="color:#4f4f4f">data-v-f3f3eg9</span>></span>hi<span style="color:#006666"></<span style="color:#4f4f4f">div</span>></span>
<span style="color:#006666"></<span style="color:#4f4f4f">template</span>></span></code></span>

注意：可以在同一个组件中使用scoped跟non-scoped styles

<span style="color:#000000"><code><span style="color:#006666"><<span style="color:#4f4f4f">style</span>></span>
<span style="color:#880000">/* global styles */</span>
<span style="color:#006666"></<span style="color:#4f4f4f">style</span>></span>

<span style="color:#006666"><<span style="color:#4f4f4f">style</span> <span style="color:#4f4f4f">scoped</span>></span>
<span style="color:#880000">/* local styles */</span>
<span style="color:#006666"></<span style="color:#4f4f4f">style</span>></span></code></span>

CSS 作用域不能代替 classes。考虑到浏览器渲染各种 CSS 选择器的方式，当使用 scoped 时，p { color: red } 在作用域中会慢很多倍（即当与属性选择器组合时）。如果你使用 classes 或者 ids 代替，比如 .example { color: red }，这样几乎没有性能影响。

7：CSS模块

在< style>上添加module属性，将为css-loader打开CSS模块模式；生成的CSS对象将为组件注入一个名叫$style的计算属性，可以在模块中使用动态的class绑定；由于他是一个计算属性，它也适用于:class的object/array语法

<span style="color:#000000"><code><span style="color:#006666"><<span style="color:#4f4f4f">template</span>></span>
  <span style="color:#006666"><<span style="color:#4f4f4f">p</span> <span style="color:#4f4f4f">:class</span>=<span style="color:#009900">"$style.red"</span>></span>
    This should be red
  <span style="color:#006666"></<span style="color:#4f4f4f">p</span>></span>
<span style="color:#006666"></<span style="color:#4f4f4f">template</span>></span>
<span style="color:#006666"><<span style="color:#4f4f4f">template</span>></span>
  <span style="color:#006666"><<span style="color:#4f4f4f">div</span>></span>
    <span style="color:#006666"><<span style="color:#4f4f4f">p</span> <span style="color:#4f4f4f">:class</span>=<span style="color:#009900">"{ [$style.red]: isRed }"</span>></span>
      Am I red?
    <span style="color:#006666"></<span style="color:#4f4f4f">p</span>></span>
    <span style="color:#006666"><<span style="color:#4f4f4f">p</span> <span style="color:#4f4f4f">:class</span>=<span style="color:#009900">"[$style.red, $style.bold]"</span>></span>
      Red and bold
    <span style="color:#006666"></<span style="color:#4f4f4f">p</span>></span>
  <span style="color:#006666"></<span style="color:#4f4f4f">div</span>></span>
<span style="color:#006666"></<span style="color:#4f4f4f">template</span>></span>
<span style="color:#006666"><<span style="color:#4f4f4f">style</span> <span style="color:#4f4f4f">module</span>></span>
<span style="color:#9b703f">.red</span> {
  color:<span style="color:#009900"> red</span>;
}
<span style="color:#9b703f">.bold</span> {
  font-weight:<span style="color:#009900"> bold</span>;
}
<span style="color:#006666"></<span style="color:#4f4f4f">style</span>></span>

<span style="color:#006666"><<span style="color:#4f4f4f">script</span>></span>
export <span style="color:#000088">default</span> {
  created () {
    console.log(<span style="color:#000088">this</span>.$style.red)
  }
}
<span style="color:#006666"></<span style="color:#4f4f4f">script</span>></span>

</code></span>

自定义注入名称

<span style="color:#000000"><code><span style="color:#006666"><<span style="color:#4f4f4f">style</span> <span style="color:#4f4f4f">module</span>=<span style="color:#009900">"a"</span>></span>

<span style="color:#006666"></<span style="color:#4f4f4f">style</span>></span>

<span style="color:#006666"><<span style="color:#4f4f4f">style</span> <span style="color:#4f4f4f">module</span>=<span style="color:#009900">"b"</span>></span>

<span style="color:#006666"></<span style="color:#4f4f4f">style</span>></span></code></span>

配置 css-loader Query

CSS 模块处理是通过 css-loader。默认 query 如下：

<span style="color:#000000"><code>{
  modules:<span style="color:#009900"> true,
  importLoaders: true,
  localIdentName: <span style="color:#009900">'[hash:base64]'</span>
</span>}</code></span>

你可以使用 vue-loader 的 cssModules 选项去为 css-loader 添加 query 配置：

<span style="color:#000000"><code><span style="color:#880000">// webpack 2</span>
module: {
  rules: [
    {
      test: <span style="color:#009900">'\.vue$'</span>,
      loader: <span style="color:#009900">'vue-loader'</span>,
      options: {
        cssModules: {
          localIdentName: <span style="color:#009900">'[path][name]---[local]---[hash:base64:5]'</span>,
          camelCase: <span style="color:#000088">true</span>
        }
      }
    }
  ]
}</code></span>

8：PostCSS

vue-loader处理的CSS输出，都是通过PostCSS进行作用域重写，还可以为PostCSS添加自定义插件，

<span style="color:#000000"><code>module.exports = {
  // other options...
  module: {
    // module.rules is the same as module.loaders <span style="color:#000088">in</span> <span style="color:#006666">1.</span>x
    rules: [
      {
        test: /\.vue$/,
        loader: <span style="color:#009900">'vue-loader'</span>,
        // vue-loader options goes here
        options: {
          // <span style="color:#000088">...</span>
          postcss: [<span style="color:#000088">require</span>(<span style="color:#009900">'postcss-cssnext'</span>)()]
        }
      }
    ]
  }
}</code></span>

9：预处理器

1：CSS

<span style="color:#000000"><code>npm install sass-loader node-sass --save-dev
<span style="color:#006666"><<span style="color:#4f4f4f">style</span> <span style="color:#4f4f4f">lang</span>=<span style="color:#009900">"sass"</span>></span>
  <span style="color:#880000">/* write sass here */</span>
<span style="color:#006666"></<span style="color:#4f4f4f">style</span>></span></code></span>

与名称相反，sass-loader 默认解析 SCSS 语法。如果你想要使用 SASS 语法，你需要配置 vue-loader 的选项：

<span style="color:#000000"><code>{
  test:<span style="color:#009900"> /\.vue$/,
  loader: <span style="color:#009900">'vue-loader'</span>,
  options: {
    loaders: {
      scss: <span style="color:#009900">'vue-style-loader!css-loader!sass-loader'</span>, // <style lang=<span style="color:#009900">"scss"</span>>
      sass: <span style="color:#009900">'vue-style-loader!css-loader!sass-loader?indentedSyntax'</span> // <style lang=<span style="color:#009900">"sass"</span>>
    </span>}
  }
}</code></span>

2：JS
Vue 组件中的所有 JavaScript 默认使用 babel-loader 处理。你也可以改变处理方式：

<span style="color:#000000"><code>npm install coffee-loader --save-dev
<span style="color:#006666"><<span style="color:#4f4f4f">script</span> <span style="color:#4f4f4f">lang</span>=<span style="color:#009900">"coffee"</span>></span>
  # Write coffeescript!
<span style="color:#006666"></<span style="color:#4f4f4f">script</span>></span></code></span>

3：template
模版的处理方式略有不同，因为大多数 Webpack 模版处理器（比如 pug-loader）会返回模版处理函数，而不是编译的 HTML 字符串，我们使用原始的 pug 替代 pug-loader:

<span style="color:#000000"><code>npm install pug --save-dev
<span style="color:#006666"><<span style="color:#4f4f4f">template</span> <span style="color:#4f4f4f">lang</span>=<span style="color:#009900">"pug"</span>></span>
div
  h1 Hello world!
<span style="color:#006666"></<span style="color:#4f4f4f">template</span>></span></code></span>

重要: 如果你使用 vue-loader@<8.2.0，你还需要安装 template-html-loader。

10：资源路径处理

默认情况下，vue-loader 使用 css-loader 和 Vue 模版编译器自动处理你的样式和模版文件。在编译过程中，所有的资源路径例如 , background: url(…) 和 @import 会作为模块依赖。

例如，url(./image.png) 会被转换为 require(‘./image.png’)
因为 .png 不是一个 JavaScript 文件，你需要配置 Webpack 使用 file-loader 或者 url-loader 去处理它们。vue-cli 脚手器工具已经为你配置好了

使用它们的好处：
（1）file-loader 可以指定要复制和放置资源文件的位置，以及如何使用版本哈希命名以获得更好的缓存。此外，这意味着你可以就近管理你的图片文件，可以使用相对路径而不用担心布署时URL问题。使用正确的配置，Webpack 将会在打包输出中自动重写文件路径为正确的URL。

（2）url-loader 允许你有条件将文件转换为内联的 base-64 URL（当文件小于给定的阈值），这会减少小文件的 HTTP 请求。如果文件大于该阈值，会自动的交给 file-loader 处理。

11：Loader 进阶配置

<span style="color:#000000"><code>module.exports = {
  <span style="color:#880000">// other options...</span>
  module: {
    <span style="color:#880000">// module.rules 与 1.x中的 module.loaders 相同</span>
    rules: [
      {
        test: <span style="color:#008800">/\.vue$/</span>,
        loader: <span style="color:#009900">'vue-loader'</span>,
        options: {
          <span style="color:#880000">// `loaders` 覆盖默认 loaders.</span>
          <span style="color:#880000">// 以下配置会导致所有的 <script> 标签 "lang" 属性失效。</span>
          <span style="color:#880000">// attribute to be loaded with coffee-loader</span>
          loaders: {
            js: <span style="color:#009900">'coffee-loader'</span>
          },

          <span style="color:#880000">// `preLoaders` 会在默认 loaders 之前加载.</span>
          <span style="color:#880000">// 你可以用来预处理语言块 - 一个例子是用来处理构建时的 i18n</span>
          preLoaders: {
            js: <span style="color:#009900">'/path/to/custom/loader'</span>
          },

          <span style="color:#880000">// `postLoaders` 会在默认 loaders 之后加载.</span>
          <span style="color:#880000">//</span>
          <span style="color:#880000">// - 对于 `html`, 默认 loader 返回会编译为 JavaScript 渲染函数</span>
          <span style="color:#880000">//</span>
          <span style="color:#880000">// - 对于 `css`, 由`vue-style-loader` 返回的结果通常不太有用。使用 postcss 插件将会是更好的选择。</span>
          postLoaders: {
            html: <span style="color:#009900">'babel-loader'</span>
          }

          <span style="color:#880000">// `excludedPreLoaders` 应是正则表达式</span>
          excludedPreLoaders: <span style="color:#008800">/(eslint-loader)/</span>
        }
      }
    ]
  }
}</code></span>

12：提取CSS文件

<span style="color:#000000"><code>npm install extract-text-webpack-plugin <span style="color:#4f4f4f">--</span>save-dev



<span style="color:#880000">// webpack.config.js</span>
<span style="color:#4f4f4f">var</span> ExtractTextPlugin <span style="color:#4f4f4f">=</span> <span style="color:#000088">require</span>(<span style="color:#009900">"extract-text-webpack-plugin"</span>)

module<span style="color:#4f4f4f">.</span>exports <span style="color:#4f4f4f">=</span> {
  <span style="color:#880000">// other options...</span>
  module: {
    rules: <span style="color:#009900">[</span>
      {
        test: <span style="color:#4f4f4f">/</span><span style="color:#4f4f4f">\</span><span style="color:#4f4f4f">.</span>vue$<span style="color:#4f4f4f">/</span>,
        loader: <span style="color:#009900">'vue-loader'</span>,
        options: {
          loaders: {
            css: ExtractTextPlugin<span style="color:#4f4f4f">.</span>extract({
              use: <span style="color:#009900">'css-loader'</span>,
              fallback: <span style="color:#009900">'vue-style-loader'</span> <span style="color:#880000">// <- 这是vue-loader的依赖，所以如果使用npm3，则不需要显式安装</span>
            })
          }
        }
      }
    <span style="color:#009900">]</span>
  },
  plugins: <span style="color:#009900">[</span>
    <span style="color:#006666">new</span> ExtractTextPlugin(<span style="color:#009900">"style.css"</span>)
  <span style="color:#009900">]</span>
}</code></span>

个人分类： VUE

小灰小汇

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue-loader学习笔记

1：vue-loader简介vue-loader是一个webpack的loader；可以将vue文件转换为JS模块；2：vue-loader特性（1）ES2015默认支持（2）允许对VUE组件的组成部分使用其他webpack loader;比如对&lt; style &gt;使用SASS（编译CSS语言），对&lt; template &gt;使用JADE（jade是一个高性能的模...
复制链接

扫一扫