Skip to content

构建工具集成 NPM Version

安装

TIP

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

bash
npm i -D unplugin-vue-macros
bash
yarn add -D unplugin-vue-macros
bash
pnpm add -D unplugin-vue-macros
ts
// 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']
        // })
      },
      // 覆盖插件选项
    }),
  ],
})
ts
// 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']
        // })
      },
      // 覆盖插件选项
    }),
  ],
}
js
// 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']
        // })
      },
      // 覆盖插件选项
    }),
  ],
})
js
// webpack.config.js
module.exports = {
  /* ... */
  plugins: [
    require('unplugin-vue-macros/webpack')({
      // 覆盖插件选项
    }),
  ],
}
js
// rspack.config.js
module.exports = {
  /* ... */
  plugins: [
    require('unplugin-vue-macros/rspack')({
      // 覆盖插件选项
    }),
  ],
}
js
// rsbuild.config.js
module.exports = {
  // ...
  tools: {
    rspack: {
      plugins: [
        require('unplugin-vue-macros/rspack')({
          // 覆盖插件选项
        }),
      ],
    },
  },
}
js
// 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
ts
import { 
defineConfig
} from 'unplugin-vue-macros'
export default
defineConfig
({
// 选项 })

TypeScript 支持

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

Volar 支持

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

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

作用域插件

exportExposeexportPropsexportRender 插件不能同时使用,除非提供作用域。

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

🎉 恭喜!你已成功设置 Vue Macros。

想了解更多关于宏的信息,请访问 所有宏 😆.

贡献者

页面历史