VEUI

VEUI on GitHub
Play!中文

babel-plugin-veui

Cherry-picking components

This Babel plugin allows us to write simpler import statements directly without worrying about importing VEUI as a whole into the project.

The main function of this plugin is to automatically convert statements like this:

import { Button, Input } from 'veui'

to:

import Button from 'veui/components/Button'
import Input from 'veui/components/Input'

This way, the code we bundle will only contain the components we actually use. Similar to the babel-plugin-lodash plugin for Lodash.

Automatic prefixing

To avoid conflicts with native element names, we need to add prefixes to registered components in the following way:

export default {
  components: {
    'veui-button': Button,
    'veui-input': Input
  }
  // ...
}

As this way looks a bit verbose, babel-plugin-veui supports the following syntax:

import { VeuiButton, VeuiInput } from 'veui'

export default {
  components: {
    VeuiButton,
    VeuiInput
  }
  // ...
}

When the imported component name is prefixed with Veui, it can be automatically mapped to the corresponding module. This way, it can be directly referenced in the template as follows:

<veui-button>Submit</veui-button>

In addition to the veui- prefix, babel-plugin-veui also supports using the v- prefix directly:

import { VButton, VInput } from 'veui'

export default {
  components: {
    VButton,
    VInput
  }
  // ...
}

Then it can be used as follows:

<v-button>Submit</v-button>
Edit this page on GitHubEdit
© Baidu, Inc. 2024