From 108cce7b167f5da8b3a3c4d8ea3003f271ac33b1 Mon Sep 17 00:00:00 2001 From: wiidede Date: Thu, 24 Aug 2023 14:11:47 +0800 Subject: [PATCH] docs(README): update --- README.md | 167 +++++++++++++++++++++++++++++++++++++++++++++++---- src/types.ts | 11 ++-- 2 files changed, 162 insertions(+), 16 deletions(-) diff --git a/README.md b/README.md index 049127a..641a114 100644 --- a/README.md +++ b/README.md @@ -1,12 +1,3 @@ - - # Arco Design Nuxt Module [![npm version][npm-version-src]][npm-version-href] @@ -16,7 +7,7 @@ Find and replace all on all files (CMD+SHIFT+F): Arco Design Vue's Nuxt Module. -- [Release Notes](/CHANGELOG.md) +- [Release Notes](https://github.com/wiidede/arco-design-nuxt-module/releases) - [Online playground](https://stackblitz.com/github/wiidede/arco-design-nuxt-module?file=playground%2Fapp.vue) @@ -32,7 +23,7 @@ Arco Design Vue's Nuxt Module. ## Quick Setup -1. Add `arco-design-nuxt-module` dependency to your project +1. Add `arco-design-nuxt-module` dependency to your project(`@arco-design/web-vue` is required in your project) ```bash # Using pnpm @@ -55,6 +46,152 @@ export default defineNuxtConfig({ }) ``` +## Options + +If you need to customize the module, you can set `arco` in `nuxt.config.ts` + +### Example + +```ts +export default defineNuxtConfig({ + arco: { + importPrefix: 'A', + hookPrefix: 'Arco', + locales: ['getLocale'], + localePrefix: 'Arco', + }, +}) +``` + +### Full Type + +```ts +interface Options { + /** + * A list of components that need to be automatically imported. + * + * @default 'from @arco-design/web-vue/' + * + * @example + * ```ts + * ['Button'] + * ``` + */ + components: false | string[] + + /** + * Prefix of the component name. + * + * @default 'A' + */ + componentPrefix: string + + /** + * A list of icons component that need to be automatically imported. + * + * @default 'from @arco-design/web-vue/es/icon' + * + * @example + * ```ts + * ['IconArrowDown'] + * ``` + */ + icons: false | string[] + + /** + * Prefix of the icon component name. + * + * @default '' + */ + iconPrefix: string + + /** + * A map of components that the definition file of subComponent is in its parent component. + * Normally, you don't need to set it. + */ + subComponents: Record + + /** + * A list of imports(with style auto import) that need to be automatically imported. + * + * @default + * ```ts + * ['Notification', 'Message'] + * ``` + */ + imports: false | ('Notification' | 'Message')[] + + /** + * Prefix of the import name. + * + * @default '' + */ + importPrefix: string + + /** + * When you need to add automatically import locale function from Arco Design Vue, you can add it here. + * + * @default false + * + * @example + * ```ts + * ['useLocale', 'getLocale', 'addI18nMessages'] + * ``` + * + */ + locales: false | ('useLocale' | 'getLocale' | 'addI18nMessages')[] + + /** + * Prefix of the locale name. + * + * @default '' + * + * @example + * 'A' -> 'useALocale' + */ + localePrefix: string + + /** + * When you need to add automatically import hooks from Arco Design Vue, you can add it here. + * + * @default + * ```ts + * ['useFormItem'] + * ``` + * + */ + hooks: false | ('useFormItem')[] + + /** + * Prefix of the hook name. + * + * @default '' + * + * @example 'A' -> 'useAFormItem' + */ + hookPrefix: string + + /** + * import style css or less with components + * + * @default 'css' + * + * Disable automatically import styles with `false` + */ + importStyle: 'css' | 'less' | boolean + + /** + * A list of component names that have no styles, so resolving their styles file should be prevented + * + * @default + * ```ts + * ['ConfigProvider', 'Icon'] + * ``` + */ + noStylesComponents: string[] +} +``` + That's it! You can now use Arco Design Nuxt Module in your Nuxt app ✨ ## Development @@ -83,6 +220,14 @@ npm run test:watch npm run release ``` +## Credits + +Thanks to: + +- heavily inspired by [element-plus-nuxt](https://github.com/element-plus/element-plus-nuxt) +- [Arco Design](https://arco.design) +- [Nuxt][nuxt-href] + [npm-version-src]: https://img.shields.io/npm/v/arco-design-nuxt-module/latest.svg?style=flat&colorA=18181B&colorB=28CF8D [npm-version-href]: https://npmjs.com/package/arco-design-nuxt-module diff --git a/src/types.ts b/src/types.ts index 0b01900..57fb1b1 100644 --- a/src/types.ts +++ b/src/types.ts @@ -6,7 +6,7 @@ export interface TransformOptions { export interface Options extends TransformOptions { /** - * A list of components that need to be automatically imported externally. + * A list of components that need to be automatically imported. * * @default 'from @arco-design/web-vue/' * @@ -25,7 +25,7 @@ export interface Options extends TransformOptions { componentPrefix: string /** - * A list of components that need to be automatically imported externally. + * A list of icons component that need to be automatically imported. * * @default 'from @arco-design/web-vue/es/icon' * @@ -45,11 +45,12 @@ export interface Options extends TransformOptions { /** * A map of components that the definition file of subComponent is in its parent component. + * Normally, you don't need to set it. */ subComponents: Record /** - * A list of imports that need to be automatically imported externally. + * A list of imports(with style auto import) that need to be automatically imported. * * @default * ```ts @@ -66,7 +67,7 @@ export interface Options extends TransformOptions { importPrefix: string /** - * When you need to add automatically import content from Arco Design Vue, you can add it here. + * When you need to add automatically import locale function from Arco Design Vue, you can add it here. * * @default false * @@ -89,7 +90,7 @@ export interface Options extends TransformOptions { localePrefix: string /** - * When you need to add automatically import content from Arco Design Vue, you can add it here. + * When you need to add automatically import hooks from Arco Design Vue, you can add it here. * * @default * ```ts