Skip to content

Latest commit

 

History

History
288 lines (224 loc) · 8.04 KB

README.md

File metadata and controls

288 lines (224 loc) · 8.04 KB
Raw

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 Various themes, including Material Design 2, Material Design 3
  • 🌍  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, will be used as 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 document string VARLET
logo The logo of the component library in the document string -
alias Path alias (root is src folder when use relative path) Record<string, string> -
defaultLanguage Document default language string zh-CN
defaultLightTheme The default light theme string md3LightTheme
defaultDarkTheme The default dark theme string md3DarkTheme
useMobile Whether to display the mobile phone preview on the right boolean false
themeKey The key of the theme in local storage string VARLET_THEME
lightTheme md2 light mode document theme Record<string, any> -
darkTheme md2 dark mode document theme Record<string, any> -
md3LightTheme md3 light mode document theme Record<string, any> -
md3DarkTheme md3 dark mode document theme Record<string, any> -
highlight Document code snippet style related { style: string } -
analysis Document statistics related { baidu: string } -
pc PC side document structure configuration Record<string, any> -
mobile Mobile document structure configuration Record<string, any> -
directives Component library directive folder name string[] []
copy Copy file configuration CopyPath[] -
icons Font icon packaging related configurations _VarletConfigIcons _ -
esbuild esbuild configuration VarletConfigEsbuild -

Menu

Parameter Description Type Default
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
# force mode
varlet-cli dev -f
# draft mode
varlet-cli dev -d

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

Compile style vars types declaration file

# playground-ignore
varlet-cli compile:style-vars

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 -w
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

Execute unit tests and report coverage

# playground-ignore
varlet-cli test -cov

Lint the code

# playground-ignore
varlet-cli lint

Lint git commit message

# playground-ignore
varlet-cli commit-lint

Show checklist

# playground-ignore
varlet-cli checklist

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

Q & A

How to solve failure of installing sharp ?

  • You can choose to change mirror site which contains binaries for both sharp and libvips.
pnpm config set sharp_binary_host "https://npmmirror.com/mirrors/sharp"
pnpm config set sharp_libvips_binary_host "https://npmmirror.com/mirrors/sharp-libvips"