### 使用组件

```shell
$ npm i --save @tovoo/corn
```

注册

如果使用 Vue 默认的模板语法，需要注册组件后方可使用，有如下三种方式注册组件：

全局完整注册

```javascript
// main.ts
import { createApp } from 'vue';
import App from './App.vue';
import TovooCorn from '@tovoo/corn';
import '@tovoo/corn/dist/index.min.css';

const app = createApp(App);
app.use(TovooCorn);
app.mount('#app');
```

以上代码便完成了 Antd 的全局注册。需要注意的是，样式文件需要单独引入。

全局部分注册

```javascript
// main.ts
import { createApp } from 'vue';
import App from './App.vue';
import { Corn } from '@tovoo/corn';

const app = createApp(App);
app.use(Corn);
app.mount('#app');
```
使用

```vue
<!--App.vue-->
<template>
  <TCorn
    v-model:expression="expression"
    :tab-props="{ type: 'card' }"
    :show-expression="true"
    :show-last-time="false"
  />
  {{ expression }}
</template>

<script setup lang="ts">
import { ref } from 'vue';

const expression = ref('5/6 7,8 * * * ?');
</script>
```

### 按需加载

如果你仅需要加载使用的组件，可以通过以下的写法来按需加载组件

```javascript
import Corn from '@tovoo/corn/es/corn';
import '@tovoo/corn/es/corn/style'; // 或者 @tovoo/corn/es/corn/style/css 加载 css 文件
```

如果你使用了 babel，那么可以使用 babel-plugin-import 来进行按需加载，加入这个插件后。你可以仍然这么写：

```javascript
import { Corn } from '@tovoo/corn';
```

插件会帮你转换成 @tovoo/corn/es/xxx 的写法。另外此插件配合 style 属性可以做到模块样式的按需自动加载。

> 注意，`#babel-plugin-import` 的 style 属性除了引入对应组件的样式，也会引入一些必要的全局样式。如果你不需要它们，建议不要使用此属性。你可以 `#import '@tovoo/corn/dist/index.min.css'` 手动引入，并覆盖全局样式。

如果你使用的 Vite，你可以使用 `unplugin-vue-components` 来进行按需加载，需要向 `plugins` 添加以下方法 可实现自动加载组件及对应

```javascript
import { Corn } from '@tovoo/corn';
import '@tovoo/corn/es/corn/style/css'; //vite只能用 @tovoo/corn/es 而非 @tovoo/corn/lib
```
或者

向 plugins 添加以下方法 可实现自动加载组件及对应样式

```javascript
// vite.config.js
import { defineConfig } from 'vite';
import Components from 'unplugin-vue-components/vite';

import { TovooResolver } from '@tovoo/corn/resolver';

export default defineConfig(({ mode }) => {
  return {
    plugins: [
      Components({
        resolvers: [
          TovooResolver(),
        ],
      }),
    ],
  };
});
```

# 0.0.2 (2023-06-07)
### Features

* vite 自动载入同前缀名称过滤