79 lines
2.0 KiB
Markdown
79 lines
2.0 KiB
Markdown
|
# babel-plugin-veui
|
||
|
|
|
||
|
|
:::tip
|
||
|
|
Currently VEUI is published on npm in the form of source code and has to be transpiled before use. (Read more about the trade-off of publishing source code in [this post](https://babeljs.io/blog/2018/06/26/on-consuming-and-publishing-es2015+-packages) published by [Henry Zhu](https://www.patreon.com/henryzhu) on Babel's blog.) Babel plugins for Lodash and Vue JSX are required to transpile VEUI and VEUI provides its own Babel plugin to offer minimized code size while simply `import`ing components.
|
||
|
|
:::
|
||
|
|
|
||
|
|
## Cherrypicking components
|
||
|
|
|
||
|
|
This Babel plugin allows you to write simple `import` statements without importing VEUI as a whole.
|
||
|
|
|
||
|
|
With this plugin, the following statement:
|
||
|
|
|
||
|
|
```js
|
||
|
|
import { Button, Input } from 'veui'
|
||
|
|
```
|
||
|
|
|
||
|
|
will be automatically transformed into:
|
||
|
|
|
||
|
|
```js
|
||
|
|
import Button from 'veui/components/Button'
|
||
|
|
import Input from 'veui/components/Input'
|
||
|
|
```
|
||
|
|
|
||
|
|
So only the components that are actually imported will appear in the final bundle. It works similarly with Lodash's [babel-plugin-lodash](https://github.com/lodash/babel-plugin-lodash).
|
||
|
|
|
||
|
|
## Automatic prefixing
|
||
|
|
|
||
|
|
To avoid conflict with native HTML elements, it's recommended to prefix components when they are registered as follows:
|
||
|
|
|
||
|
|
```js
|
||
|
|
export default {
|
||
|
|
components: {
|
||
|
|
'veui-button': Button,
|
||
|
|
'veui-input': Input
|
||
|
|
}
|
||
|
|
// ...
|
||
|
|
}
|
||
|
|
```
|
||
|
|
|
||
|
|
It's kind of verbose so `babel-plugin-veui` helps to support the following usage:
|
||
|
|
|
||
|
|
```js
|
||
|
|
import { VeuiButton, VeuiInput } from 'veui'
|
||
|
|
|
||
|
|
export default {
|
||
|
|
components: {
|
||
|
|
VeuiButton,
|
||
|
|
VeuiInput
|
||
|
|
}
|
||
|
|
// ...
|
||
|
|
}
|
||
|
|
```
|
||
|
|
|
||
|
|
When the imported component is prefixed with `Veui` the plugin will find the corresponding component without the prefix. Now it's possible to use components inside templates as follows:
|
||
|
|
|
||
|
|
```html
|
||
|
|
<veui-button>Submit</veui-button>
|
||
|
|
```
|
||
|
|
|
||
|
|
Apart from the prefix `veui-`, `babel-plugin-veui` also supports using `v-` as a prefix:
|
||
|
|
|
||
|
|
```js
|
||
|
|
import { VButton, VInput } from 'veui'
|
||
|
|
|
||
|
|
export default {
|
||
|
|
components: {
|
||
|
|
VButton,
|
||
|
|
VInput
|
||
|
|
}
|
||
|
|
// ...
|
||
|
|
}
|
||
|
|
```
|
||
|
|
|
||
|
|
And use as follows:
|
||
|
|
|
||
|
|
```html
|
||
|
|
<v-button>Submit</v-button>
|
||
|
|
```
|