@zhangmo8/cli v5.0.0-alpha.1713441610050

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

@zhangmo8/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 @zhangmo8/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 @zhangmo8/ui varlet.config.mjs.

Menu

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"