自定义代码块

需要 10.2.0+

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

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

例子

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

component.vue

  1. <docs>
  2. ## 这是一个示例组件.
  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. // Webpack 2.x
  2. var ExtractTextPlugin = require("extract-text-webpack-plugin")
  4. module.exports = {
  5.   module: {
  6.     rules: [
  7.       {
  8.         test: /\.vue$/,
  9.         loader: 'vue',
  10.         options: {
  11.           loaders: {
  12.             // 将所有<docs>内容提取为原始文本
  13.             'docs': ExtractTextPlugin.extract('raw-loader'),
  14.           }
  15.         }
  16.       }
  17.     ],
  18.     plugins: [
  19.       // 将所有文档输出到单个文件
  20.       new ExtractTextPlugin('docs.md')
  21.     ]
  22.   }
  23. }