构建工具集成

安装

TIP

完全支持 Vite 和 Rollup，其他构建工具支持有限。

npmyarnpnpm

bash

npm i -D unplugin-vue-macros

bash

yarn add -D unplugin-vue-macros

bash

pnpm add -D unplugin-vue-macros

// vite.config.ts
import Vue from '@vitejs/plugin-vue'
import VueMacros from 'unplugin-vue-macros/vite'
// import VueJsx from '@vitejs/plugin-vue-jsx'
// import VueRouter from 'unplugin-vue-router/vite'

export default defineConfig({
  plugins: [
    VueMacros({
      plugins: {
        vue: Vue(),
        // vueJsx: VueJsx(), // 如有需要
        // vueRouter: VueRouter({ // 如有需要
        //   extensions: ['.vue', '.setup.tsx']
        // })
      },
      // 覆盖插件选项
    }),
  ],
})

// rollup.config.js
import VueMacros from 'unplugin-vue-macros/rollup'
import Vue from 'unplugin-vue/rollup'
// import VueRouter from 'unplugin-vue-router/rollup'

export default {
  plugins: [
    VueMacros({
      plugins: {
        vue: Vue(),
        // vueJsx: VueJsx(), // 如有需要
        // vueRouter: VueRouter({ // 如有需要
        //   extensions: ['.vue', '.setup.tsx']
        // })
      },
      // 覆盖插件选项
    }),
  ],
}

// esbuild.config.js
import { build } from 'esbuild'
// import VueRouter from 'unplugin-vue-router/esbuild'

build({
  plugins: [
    require('unplugin-vue-macros/esbuild')({
      plugins: {
        vue: require('unplugin-vue/esbuild')(),
        // vueJsx: VueJsx(), // 如有需要
        // vueRouter: VueRouter({ // 如有需要
        //   extensions: ['.vue', '.setup.tsx']
        // })
      },
      // 覆盖插件选项
    }),
  ],
})

// webpack.config.js
module.exports = {
  /* ... */
  plugins: [
    require('unplugin-vue-macros/webpack')({
      // 覆盖插件选项
    }),
  ],
}

// rspack.config.js
module.exports = {
  /* ... */
  plugins: [
    require('unplugin-vue-macros/rspack')({
      // 覆盖插件选项
    }),
  ],
}

// rsbuild.config.js
module.exports = {
  // ...
  tools: {
    rspack: {
      plugins: [
        require('unplugin-vue-macros/rspack')({
          // 覆盖插件选项
        }),
      ],
    },
  },
}

// vue.config.js
const { defineConfig } = require('@vue/cli-service')
const VueMacros = require('unplugin-vue-macros/webpack')

module.exports = defineConfig({
  // ...
  // ⚠️ 重要
  parallel: false,
  configureWebpack: {
    plugins: [
      VueMacros({
        // 覆盖插件选项
      }),
    ],
  },
})

配置

详情请参阅配置。

// vue-macros.config.ts

import { defineConfig
 } from 'unplugin-vue-macros'
export default defineConfig
({
  // 选项
})

TypeScript 支持

Vue 3Vue 2

json

// tsconfig.json
{
  "compilerOptions": {
    // ...
    "types": ["unplugin-vue-macros/macros-global" /* ... */]
  }
}

json

// tsconfig.json
{
  "compilerOptions": {
    // ...
    "types": ["unplugin-vue-macros/vue2-macros-global" /* ... */]
  }
}

Volar 支持

详细配置请参阅具体宏的描述。

jsonc

// tsconfig.json
{
  "vueCompilerOptions": {
    "plugins": ["unplugin-vue-macros/volar"],
  },
}

作用域插件

exportExpose、exportProps 和 exportRender 插件不能同时使用，除非提供作用域。

// vue-macros.config.ts

import { defineConfig
 } from 'unplugin-vue-macros'
export default defineConfig
({
  exportExpose
: {
    include
: ['**/export-expose/**'],
  },
  exportProps
: {
    include
: ['**/export-props/**'],
  },
  exportRender
: {
    include
: ['**/export-render/**'],
  },
})