目录

自定义模块

优质
小牛编辑
137浏览
2023-12-01

需要 10.2.0+

您可以在*.vue文件中定义自定义语言块。 自定义块的内容将由在vue-loader'选项的loaders对象中指定的加载器处理,然后由组件模块require。 配置类似于[先进的Loader配置](../ configurations / advanced.md)中描述的配置,除了匹配使用标记名称而不是lang`属性。

如果找到一个自定义块的匹配加载器,它将被处理; 否则将简单地忽略自定义块。

例子

以下是将所有<docs>自定义块提取到单个文档文件的示例:

component.vue

<docs>
## 这是一个示例组件.
</docs>

<template>
  <h2 class="red">{{msg}}</h2>
</template>

<script>
export default {
  data () {
    return {
      msg: 'Hello from Component A!'
    }
  }
}
</script>

<style>
comp-a h2 {
  color: #f00;
}
</style>

webpack.config.js

// Webpack 2.x
var ExtractTextPlugin = require("extract-text-webpack-plugin")

module.exports = {
  module: {
    rules: [
      {
        test: /\.vue$/,
        loader: 'vue',
        options: {
          loaders: {
            // 将所有<docs>内容提取为原始文本
            'docs': ExtractTextPlugin.extract('raw-loader'),
          }
        }
      }
    ],
    plugins: [
      // 将所有文档输出到单个文件
      new ExtractTextPlugin('docs.md')
    ]
  }
}