vant-cli构建组件库

最近公司想做自己的组件库，调研阶段给时间了解了vant-cli

Vant Cli 是一个 Vue 组件库构建工具，通过 Vant Cli 可以快速搭建一套功能完备的 Vue 组件库。

特性

• 提供丰富的命令，涵盖从开发测试到构建发布的完整流程

• 基于约定的目录结构，自动生成优雅的文档站点和组件示例

• 内置 ESlint、Stylelint 校验规则，提交代码时自动执行校验

• 构建后的组件库默认支持按需引入、主题定制、Tree Shaking

快速上手

执行以下命令可以快速创建一个基于 Vant Cli 的项目：

npm create vant-cli-app

手动安装

# 通过 npm 安装
npm i @vant/cli -D

# 通过 yarn 安装
yarn add @vant/cli --dev

安装完成后，请将以下配置添加到 package.json 文件中

{
  "scripts": {
    "dev": "vant-cli dev",
    "test": "vant-cli test",
    "lint": "vant-cli lint",
    "build": "vant-cli build",
    "release": "vant-cli release",
    "build-site": "vant-cli build-site"
  },
  "husky": {
    "hooks": {
      "pre-commit": "lint-staged",
      "commit-msg": "vant commit-lint"
    }
  },
  "lint-staged": {
    "*.{js,jsx,ts,tsx,vue}": "eslint --fix",
    "*.{vue,css,less,scss}": "stylelint --fix"
  },
  "eslintConfig": {
    "root": true,
    "extends": ["@vant"]
  },
  "stylelint": {
    "extends": ["@vant/stylelint-config"]
  },
  "prettier": {
    "singleQuote": true
  },
  "browserslist": ["Android >= 4.0", "iOS >= 8"]
}

Vant组件库

1. Vant vue2.0版本 Vant 2 - Mobile UI Components built on Vue

2. Vant vue3.0版本 Vant 4 - A lightweight, customizable Vue UI library for mobile web apps.

3. Vant Weapp 微信小程序版本 Vant Weapp - 轻量、可靠的小程序 UI 组件库

4. react-vant React版本 https://github.com/3lang3/react-vant

5. Vant-Aliapp 支付宝小程序版本 https://github.com/ant-move/Vant-Aliapp

这篇好文章是转载于：学新通技术网