简体中文

Vue 2 插件

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

快速开始

安装插件

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

npm

yarn

pnpm

bun

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

注册插件

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

import { builderPluginVue2 } from '@modern-js/builder-plugin-vue2';

builder.addPlugins([builderPluginVue2()]);

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

配置

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

vueLoaderOptions

类型： VueLoaderOptions
默认值：

const defaultOptions = {
  compilerOptions: {
    preserveWhitespace: false,
  },
};

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

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

TIP

Vue 2 插件使用的是 vue-loader v15 版本，请注意区分 v15 版本与最新版本之间可能存在配置差异。

vueJsxOptions

类型：

type VueJSXPresetOptions = {
  compositionAPI?: boolean | string;
  functional?: boolean;
  injectH?: boolean;
  vModel?: boolean;
  vOn?: boolean;
};

默认值：

const defaultOptions = {
  injectH: true,
};

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

builderPluginVue2({
  vueJsxOptions: {
    injectH: false,
  },
});

Vue 2 插件#

快速开始#

安装插件#

注册插件#

配置#

vueLoaderOptions#