自定义块

.vue 文件中,你可以自定义语言块。应用于一个自定义块的 loader 是基于这个块的 lang 特性、块的标签名以及你的 webpack 配置进行匹配的。

如果指定了一个 lang 特性,则这个自定义块将会作为一个带有该 lang 扩展名的文件进行匹配。

你也可以使用 resourceQuery 来为一个没有 lang 的自定义块匹配一条规则。例如为了匹配自定义块 <foo>

  1. {
  2. module: {
  3. rules: [
  4. {
  5. resourceQuery: /blockType=foo/,
  6. loader: 'loader-to-use'
  7. }
  8. ]
  9. }
  10. }

如果找到了一个自定义块的匹配规则,它将会被处理,否则该自定义块会被默默忽略。

此外,如果这个自定义块被所有匹配的 loader 处理之后导出一个函数作为最终结果,则这个 *.vue 文件的组件会作为一个参数被这个函数调用。

Example

这里有一个向组件内注入 <docs> 自定义块的示例,且它是在运行时可用的。

为了注入自定义块的内容,我们将会撰写一个自定义 loader:

  1. module.exports = function (source, map) {
  2. this.callback(
  3. null,
  4. `export default function (Component) {
  5. Component.options.__docs = ${
  6. JSON.stringify(source)
  7. }
  8. }`,
  9. map
  10. )
  11. }

现在我们将会配置 webpack 来使用为 <docs> 自定义块撰写的自定义 loader。

  1. // wepback.config.js
  2. module.exports = {
  3. module: {
  4. rules: [
  5. {
  6. resourceQuery: /blockType=docs/,
  7. loader: require.resolve('./docs-loader.js')
  8. }
  9. ]
  10. }
  11. }

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

  1. <!-- ComponentB.vue -->
  2. <template>
  3. <div>Hello</div>
  4. </template>
  5. <docs>
  6. This is the documentation for component B.
  7. </docs>
  1. <!-- ComponentA.vue -->
  2. <template>
  3. <div>
  4. <ComponentB/>
  5. <p>{{ docs }}</p>
  6. </div>
  7. </template>
  8. <script>
  9. import ComponentB from './ComponentB.vue';
  10. export default {
  11. components: { ComponentB },
  12. data () {
  13. return {
  14. docs: ComponentB.__docs
  15. }
  16. }
  17. }
  18. </script>

原文: https://vue-loader.vuejs.org/zh/guide/custom-blocks.html