构建工具集成
安装
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({
// 覆盖插件选项
}),
],
},
})
配置
详情请参阅 配置。
ts
// vue-macros.config.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 支持
详细配置请参阅具体宏的描述。
jsonc
// tsconfig.json
{
"vueCompilerOptions": {
"plugins": ["unplugin-vue-macros/volar"],
},
}
作用域插件
exportExpose
、exportProps
和 exportRender
插件不能同时使用,除非提供作用域。
ts
// 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/**'],
},
})
🎉 恭喜!你已成功设置 Vue Macros。
想了解更多关于宏的信息,请访问 所有宏 😆.