自定义块

在大于 10.2.0 中支持

在 .vue 文件中，你可以自定义语言块。自定义块的内容将由 vue-loader 的 options 中的 loader 对象中指定的 loader 处理，然后被组件模块依赖。类似 Loader 进阶配置中的配置，但使用的是标签名匹配，而不是 lang 属性。

如果找到一个与自定义块匹配的 loader，该自定义块将被处理；否则自定义块将被忽略。另外，如果找到的 loader 返回一个函数，该函数将以 * .vue 文件的组件作为参数来调用。

单个文档文件的例子

这是提取自定义块 <docs> 的内容到单个 docs 文件中的例子：

component.vue

  1. <docs>
  2. ## This is an Example component.
  3. </docs>
  5. <template>
  6.   <h2 class="red">{{msg}}</h2>
  7. </template>
  9. <script>
  10. export default {
  11.   data () {
  12.     return {
  13.       msg: 'Hello from Component A!'
  14.     }
  15.   }
  16. }
  17. </script>
  19. <style>
  20. comp-a h2 {
  21.   color: #f00;
  22. }
  23. </style>

webpack.config.js

  1. var ExtractTextPlugin = require("extract-text-webpack-plugin")
  3. module.exports = {
  4.   module: {
  5.     rules: [
  6.       {
  7.         test: /\.vue$/,
  8.         loader: 'vue-loader',
  9.         options: {
  10.           loaders: {
  11.             // 提取 <docs> 中的内容为原始文本
  12.             'docs': ExtractTextPlugin.extract('raw-loader'),
  13.           }
  14.         }
  15.       }
  16.     ]
  17.   },
  18.   plugins: [
  19.     // 输出 docs 到单个文件中
  20.     new ExtractTextPlugin('docs.md')
  21.   ]
  22. }

运行时可用的文档

在 11.3.0+ 中支持

这里有一个向组件注入 <docs> 自定义块使其在运行时可用的例子。

docs-loader.js

为了使得自定义块内容被注入，我们需要一个自定义的 loader：

  1. module.exports = function (source, map) {
  2.   this.callback(null, 'module.exports = function(Component) {Component.options.__docs = ' +
  3.     JSON.stringify(source) +
  4.     '}', map)
  5. }

webpack.config.js

现在我们将为 <docs> 自定义块配置我们的 webpack 自定义 loader。

  1. const docsLoader = require.resolve('./custom-loaders/docs-loader.js')
  3. module.exports = {
  4.   module: {
  5.     rules: [
  6.       {
  7.         test: /\.vue$/,
  8.         loader: 'vue-loader',
  9.         options: {
  10.           loaders: {
  11.             'docs': docsLoader
  12.           }
  13.         }
  14.       }
  15.     ]
  16.   }
  17. }

component.vue

现在我们可以在运行时访问已导入组件的 <docs> 块内容了。

  1. <template>
  2.   <div>
  3.     <component-b />
  4.     <p>{{ docs }}</p>
  5.   </div>
  6. </template>
  8. <script>
  9. import componentB from 'componentB';
  11. export default = {
  12.   data () {
  13.     return {
  14.       docs: componentB.__docs
  15.     }
  16.   },
  17.   components: {componentB}
  18. }
  19. </script>

原文: https://vue-loader-v14.vuejs.org/zh-cn/configurations/custom-blocks.html