Components Library Tools

Intro

The out-of-the-box Vue3 component library rapid prototyping tool provides a series of commands and tools to solve the problem of component library development.

Features

• 📦  Out-of-the-box component library development environment
• 📦  An out-of-the-box component library compilation tool that supports exporting esm, cjs, umd module codes
• 🛠️  Configuration file-based component library documentation site, support Baidu statistics and theme customization
• 🛠️  Supports both sfc and tsx styles for writing component libraries
• 📦  Out-of-the-box code inspection tool
• 📦  Out-of-the-box unit testing tools
• 📦  Out-of-the-box code publishing tool, publishes to both npm and github, and automatically generates changelogs
• 💪  Support for VSCode extension development
• 💪  Support build svg to web fonts
• 💪  Support for Typescript
• 💪  Support Dark Mode
• 🌍  Support Internationalization
• 🚀  Based on pnpm

Quickstart

@varlet/cli has built-in sfc and tsx style component library project templates, which can be generated directly by the gen command. It is convenient for you to directly enter the component library development.

# playground-ignore
pnpm add @varlet/cli -g
varlet-cli gen

Advanced customization

Configuration file

The varlet.config.mjs in the project root directory is used to manage the specific details of the entire component library project. The default configuration can be viewed varlet.default.config.ts. Also refer to @varlet/ui varlet.config.mjs.

| Parameter | Description | Type | Default | | -- | -------------- | -------- | ---------- | | name | The full name of the component library, which will be used as the package name | string | Varlet | | namespace | Component library namespace, which will be used as a component prefix | string | var | | host | Development server host | number | localhost | | port | Development server port | number | 8080 | | title | The title of the component library in the documentation | string | VARLET | | logo | The logo of the component library in the documentation | string | - | | defaultLanguage | Documentation default language | string | zh-CN | | useMobile | Whether to show the preview of the right mobile phone | boolean | false | | lightTheme | Light Mode Documentation Theme | Record<string, any> | - | | darkTheme | Dark Mode Documentation Theme | Record<string, any> | - | | highlight | Documentation snippet style related | { style: string } | - | | analysis | Document statistics related | { baidu: string } | - | | pc | PC-side document structure configuration | Record<string, any> | - | | mobile | Mobile side document structure configuration | Record<string, any> | - | | copy | Copy file options | CopyPath[] | - | | icons | Font icon packaging related configuration | VarletConfigIcons | - |

Menu

| 参数 | 说明 | 类型 | 默认值 | | -- | -------------- | -------- | ---------- | | doc | The document page corresponds to the matching file name, required | string | - | | type | The type of menu, when the type is 1, it means the category menu, when the type is 2, the doc field matches the component file under src, when the type is 3, the doc field matches the md file under docs, required | MenuTypes | - | | text | The text displayed in the menu, English display text can be configured when internationalization is set, required | Record<string, string> | - | | useMobile | Whether to display the mobile phone preview on the right side on the current document page, if not filled, the default value is useMobile in config | boolean | - |

Custom pages

If you want to insert other pages into the component library, you can create a pages folder in the project root directory to write a vue component to generate other pages. The directory structure is as follows:

// playground-ignore
|-- varlet-ui
  |-- src
  |-- docs
  |-- pages
    |-- sponsor
      |-- index.vue
    |-- contributor
      |-- locale
        |-- en-US.ts
      |-- index.vue
    |-- changelog
      |-- locale
        |-- zh-CN.ts
        |-- en-US.ts
      |-- index.vue
      

The resulting route is as follows:

// playground-ignore
/zh-CN/sponsor
/en-US/contributor
/zh-CN/changelog
/en-US/changelog

Command related

Start the development server

# playground-ignore
varlet-cli dev

Build a documentation site

# playground-ignore
varlet-cli build

Preview documentation site

# playground-ignore
varlet-cli preview

Compile component library

# playground-ignore
varlet-cli compile

Run VSCode extension development environment

# playground-ignore
varlet-cli dev:extension

Build VSCode extension for production

# playground-ignore
varlet-cli build:extension

Build svg to web fonts

# playground-ignore
varlet-cli build:icons

Execute all unit tests

# playground-ignore
varlet-cli test

Execute unit tests in watch mode

# playground-ignore
varlet-cli test -w
or
varlet-cli test -wa

Lint the code

# playground-ignore
varlet-cli lint

Lint git commit message

# playground-ignore
varlet-cli commit-lint

Generate changelog

# playground-ignore
varlet-cli changelog

Release component library

# playground-ignore
varlet-cli release

Generate a project template

# playground-ignore
varlet-cli gen

# Options
-n
--name
  project name
-s
--sfc
  Generate sfc-style project templates
-t
--tsx
  Generate tsx-style project templates
-l
--locale
  Need to support internationalization

Create a component template file

# playground-ignore
varlet-cli create

# Options
-n
--name
  project name
-s
--sfc
  Generate sfc-style component
-t
--tsx
  Generate tsx-style component
-l
--locale
  Need to support internationalization

Note before publish

• 1.npm repository registry must set to npm official mirror
• 2.Execute npm login to log in