Vue Macros

简体中文

English

简体中文

English

外观

打包器集成 ​

安装 ​

bash
npm i -D unplugin-vue-macros
npm i -D unplugin-vue-macros
bash
yarn add -D unplugin-vue-macros
yarn add -D unplugin-vue-macros
bash
pnpm add -D unplugin-vue-macros
pnpm add -D unplugin-vue-macros
ts
// vite.config.ts
import VueMacros from 'unplugin-vue-macros/vite'
import Vue from '@vitejs/plugin-vue'
// import VueJsx from '@vitejs/plugin-vue-jsx'

export default defineConfig({
  plugins: [
    VueMacros({
      plugins: {
        vue: Vue(),
        // vueJsx: VueJsx(), // 如果需要
      },
    }),
  ],
})
// vite.config.ts
import VueMacros from 'unplugin-vue-macros/vite'
import Vue from '@vitejs/plugin-vue'
// import VueJsx from '@vitejs/plugin-vue-jsx'

export default defineConfig({
  plugins: [
    VueMacros({
      plugins: {
        vue: Vue(),
        // vueJsx: VueJsx(), // 如果需要
      },
    }),
  ],
})
ts
// rollup.config.js
import Vue from 'unplugin-vue/rollup'
import VueMacros from 'unplugin-vue-macros/rollup'

export default {
  plugins: [
    VueMacros({
      plugins: {
        vue: Vue(),
        // vueJsx: VueJsx(), // 如果需要
      },
    }),
  ],
}
// rollup.config.js
import Vue from 'unplugin-vue/rollup'
import VueMacros from 'unplugin-vue-macros/rollup'

export default {
  plugins: [
    VueMacros({
      plugins: {
        vue: Vue(),
        // vueJsx: VueJsx(), // 如果需要
      },
    }),
  ],
}
js
// esbuild.config.js
import { build } from 'esbuild'

build({
  plugins: [
    require('unplugin-vue-macros/esbuild')({
      plugins: {
        vue: require('unplugin-vue/esbuild')(),
        // vueJsx: VueJsx(), // 如果需要
      },
    }),
  ],
})
// esbuild.config.js
import { build } from 'esbuild'

build({
  plugins: [
    require('unplugin-vue-macros/esbuild')({
      plugins: {
        vue: require('unplugin-vue/esbuild')(),
        // vueJsx: VueJsx(), // 如果需要
      },
    }),
  ],
})
js
// webpack.config.js
module.exports = {
  /* ... */
  plugins: [require('unplugin-vue-macros/webpack')({})],
}
// webpack.config.js
module.exports = {
  /* ... */
  plugins: [require('unplugin-vue-macros/webpack')({})],
}
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.config.js
const { defineConfig } = require('@vue/cli-service')
const VueMacros = require('unplugin-vue-macros/webpack')

module.exports = defineConfig({
  // ...
  // ⚠️ 重要
  parallel: false,
  configureWebpack: {
    plugins: [VueMacros({})],
  },
})

TypeScript 支持 ​

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

Volar 支持 ​

有关宏的详细配置请参考每个宏的具体说明。

bash
npm i -D @vue-macros/volar
npm i -D @vue-macros/volar
jsonc
// tsconfig.json
{
  "vueCompilerOptions": {
    "plugins": [
      "@vue-macros/volar/define-options",
      "@vue-macros/volar/define-models",
      "@vue-macros/volar/define-props",
      "@vue-macros/volar/define-props-refs",
      "@vue-macros/volar/short-vmodel",
      "@vue-macros/volar/define-slots",
      "@vue-macros/volar/jsx-directive",
      "@vue-macros/volar/setup-jsdoc"

      // 选择以下其中一个
      // "@vue-macros/volar/export-expose",
      // "@vue-macros/volar/export-props",
      // "@vue-macros/volar/export-render",
    ]
    // ...
  }
}
// tsconfig.json
{
  "vueCompilerOptions": {
    "plugins": [
      "@vue-macros/volar/define-options",
      "@vue-macros/volar/define-models",
      "@vue-macros/volar/define-props",
      "@vue-macros/volar/define-props-refs",
      "@vue-macros/volar/short-vmodel",
      "@vue-macros/volar/define-slots",
      "@vue-macros/volar/jsx-directive",
      "@vue-macros/volar/setup-jsdoc"

      // 选择以下其中一个
      // "@vue-macros/volar/export-expose",
      // "@vue-macros/volar/export-props",
      // "@vue-macros/volar/export-render",
    ]
    // ...
  }
}

Scoped Plugins ​

除非提供范围，否则不能同时使用 export-expose、export-props 和 export-render 插件。

jsonc
// tsconfig.json
{
  "vueCompilerOptions": {
    "plugins": [
      "@vue-macros/volar/export-render",
      "@vue-macros/volar/export-expose",
      "@vue-macros/volar/export-props"
    ],
    "vueMacros": {
      "exportExpose": {
        "include": ["**/export-expose/**"]
      },
      "exportProps": {
        "include": ["**/export-props/**"]
      },
      "exportRender": {
        "include": ["**/export-render/**"]
      }
    }
  }
}
// tsconfig.json
{
  "vueCompilerOptions": {
    "plugins": [
      "@vue-macros/volar/export-render",
      "@vue-macros/volar/export-expose",
      "@vue-macros/volar/export-props"
    ],
    "vueMacros": {
      "exportExpose": {
        "include": ["**/export-expose/**"]
      },
      "exportProps": {
        "include": ["**/export-props/**"]
      },
      "exportRender": {
        "include": ["**/export-render/**"]
      }
    }
  }
}

🎉 恭喜你! 目前你已经成功将 Vue Macros 设置完成。

如果你还想要了解有关宏的更多信息, 请访问 全部宏 😆。