简体中文

Vue 插件

Vue 插件提供了对 Vue 3 应用构建的支持，插件内部集成了 vue-loader 和 @vue/babel-plugin-jsx。

快速开始

安装插件

你可以通过如下的命令安装插件:

npm

yarn

pnpm

bun

npm add @modern-js/builder-plugin-vue -D

注册插件

你可以通过 addPlugins 方法来注册 Vue 插件：

import { builderPluginVue } from '@modern-js/builder-plugin-vue';

builder.addPlugins([builderPluginVue()]);

安装完插件后，你可以直接在代码中引入 *.vue 文件，也可以使用 Vue 的 JSX 语法，无须添加其他配置。

配置

如果你需要自定义 Vue 的编译行为，可以使用以下配置项。

vueLoaderOptions

类型： VueLoaderOptions
默认值：

const defaultOptions = {
  compilerOptions: {
    preserveWhitespace: false,
  },
  experimentalInlineMatchResource: builder === 'rspack',
};

传递给 vue-loader 的选项，请查阅 vue-loader 文档来了解具体用法。

builderPluginVue({
  vueLoaderOptions: {
    hotReload: false,
  },
});

vueJsxOptions

类型：

type VueJSXPluginOptions = {
  /** 将 `on: { click: xx }` 转换为 `onClick: xxx` */
  transformOn?: boolean;
  /** 是否启用优化。 */
  optimize?: boolean;
  /** 合并静态和动态 class / style 属性 / onXXX 事件处理函数 */
  mergeProps?: boolean;
  /** 配置自定义元素 */
  isCustomElement?: (tag: string) => boolean;
  /** 启用对象插槽语法 */
  enableObjectSlots?: boolean;
  /** 替换用于编译 JSX 表达式的函数 */
  pragma?: string;
};

默认值： {}

传递给 @vue/babel-plugin-jsx 的选项，请查阅 @vue/babel-plugin-jsx 文档来了解具体用法。

builderPluginVue({
  vueJsxOptions: {
    transformOn: true,
  },
});

Vue 插件#

快速开始#

安装插件#

注册插件#

配置#

vueLoaderOptions#