docs(README): update

wiidede · Aug 24, 2023 · 108cce7 · 108cce7
1 parent 91d3ba2
commit 108cce7
Show file tree

Hide file tree

Showing 2 changed files with 162 additions and 16 deletions.
diff --git a/README.md b/README.md
@@ -1,12 +1,3 @@
-<!--
-Get your module up and running quickly.
-
-Find and replace all on all files (CMD+SHIFT+F):
-- Name: Arco Design Nuxt Module
-- Package name: arco-design-nuxt-module
-- Description: Arco Design Nuxt Module
--->
-
 # 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)
 <!-- - [📖 &nbsp;Documentation](https://example.com) -->
 
@@ -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<string, string[]>
+
+  /**
+   * 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]
+
 <!-- Badges -->
 [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
@@ -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<string, string[]>
 
   /**
-   * 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