create-h-ui-cli

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