README-zh_CN.md

babel-plugin-vue-components

自动引入并将Vue组件注册为全局组件

English | 简体中文

安装

• 首先安装 babel/core

• 接着安装插件

$ npm i -D babel-plugin-vue-components
# 或者
$ yarn add -D babel-plugin-vue-components

用法

const babel = require('@babel/core');
const VueComponentsPlugin = require('babel-plugin-vue-components');

babel.transform(code, {
  plugins: [
    [VueComponentsPlugin, {
      main: './src/main.ts',
      includes: ['./src/components/**/*.vue', './src/components/**/*.tsx'],
    }],
  ],
});

自动导入并注册

假设我们的项目中的src/components目录存在: foo.vue和bar.tsx, 以默认配置运行的结果是:

// before
import Vue from 'vue';

// after
import Vue from 'vue';
import foo from './foo.vue';
import bar from './bar.tsx';

Vue.component('foo', foo);
Vue.component('bar', bar);

配置

main

类型: String
默认值: ./src/main.js

main.js文件相对于当前运行脚本的位置

include

类型: Array[...String] | Array[...RegisterOptionInclude]
默认值: ['./src/components/**/*.vue']

声明一个minimatch pattern匹配模式的数组，指定插件应该操作的文件

export interface RegisterOptionInclude {
  path: string;
  // match nearest package.json's name as scope,
  scope?: boolean;
  componentName?: 'file' | 'package' | 'option';
}

当scope为true时，自动匹配最近package.json的name属性作为组件名的前缀。componentName则指定了组件名的取值: 文件名，最近package.json的name属性, 或是匹配到的Vue SFC文件选择中的name属性。

semicolon

类型: Boolean
默认值: true

语句末尾是否添加分号

extension

类型: Boolean
默认值: true

导入文件是否保留文件后缀

quotes

类型: 'single' | 'double'
默认值: 'single'

导入文件使用单引号/双引号