npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@varlet/cli

v3.7.4

Published

cli of varlet

Downloads

770

Readme

组件库快速成型工具

介绍

开箱即用的 Vue3组件库 快速成型工具,提供了一系列命令和工具去解决组件库开发上的问题。

特性

  • 📦  开箱即用的组件库开发环境
  • 📦  开箱即用的组件库编译工具,支持导出 esm, cjs, umd 三种模块代码
  • 🛠️  基于配置文件的组件库文档站点,支持百度统计和主题定制
  • 🛠️  支持 sfctsx 两种风格的组件库编写风格
  • 📦  开箱即用的代码检查工具
  • 📦  开箱即用的单元测试工具
  • 📦  开箱即用的代码发布工具,同时发布到 npmgithub, 并自动生成更新日志
  • 💪  支持 VSCode 插件开发
  • 💪  支持 字体图标打包
  • 💪  支持 Typescript
  • 💪  支持 多种主题, 包含 Material Design 2、Material Design 3
  • 🌍  支持 国际化
  • 🚀  基于 pnpm

快速开始

@varlet/cli 内置了 sfctsx 两种风格的组件库项目模板,可以通过 gen 命令直接生成。 方便您直接进入组件库开发。

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

高级定制

配置文件

项目根目录下的 varlet.config.mjs 用来管理整个组件库项目的具体细节。 默认配置可查阅 varlet.default.config.ts。 也可以参考 @varlet/uivarlet.config.mjs

| 参数 | 说明 | 类型 | 默认值 | | -- | -------------- | -------- | ---------- | | name | 组件库全名,会作为包名 | string | Varlet | | namespace | 组件库命名空间, 会作为组件前缀 | string | var | | host | 开发服务器主机 | number | localhost | | port | 开发服务器端口 | number | 8080 | | proxy | 开发服务器代理 | Record<string, string | ProxyOptions> | - | | title | 文档中组件库的标题 | string | VARLET | | logo | 文档中组件库的 logo | string | - | | alias | 路径别名 (使用相对路径时,根路径为 src 文件夹) | Record<string, string> | - | | defaultLanguage | 文档默认语言 | string | zh-CN | | defaultLightTheme | 默认的亮色主题 | string | md3LightTheme | | defaultDarkTheme | 默认的暗色主题 | string | md3DarkTheme | | useMobile | 是否显示右侧手机预览 | boolean | false | | themeKey | 主题在本地存储中的 key | string | VARLET_THEME | | lightTheme | md2 亮色模式文档主题 | Record<string, any> | - | | darkTheme | md2 暗黑模式文档主题 | Record<string, any> | - | | md3LightTheme | md3 亮色模式文档主题 | Record<string, any> | - | | md3DarkTheme | md3 暗黑模式文档主题 | Record<string, any> | - | | highlight | 文档代码片段样式相关 | { style: string } | - | | analysis | 文档统计相关 | { baidu: string } | - | | pc | pc 端文档结构配置 | VarletConfigPc | - | | mobile | mobile 端文档结构配置 | VarletConfigMobile | - | | bundle | 组件库编译的捆绑产物配置 | { external: string[], globals: Record<string, string> } | - | | vitePlugins | vite 插件 | Plugin[] | (plugins: Plugin[]) => Plugin[]) | - | | directives | 组件库指令文件夹名称 | string[] | [] | | copy | 复制文件配置 | CopyPath[] | - | | icons | 字体图标打包相关配置 | VarletConfigIcons | - | | esbuild | esbuild 配置 | VarletConfigEsbuild | - | | seo | seo 选项 | VarletConfigSeo | - |

Menu

| 参数 | 说明 | 类型 | 默认值 | | -- | -------------- | -------- | ---------- | | doc | 文档页面应匹配的文件名称, 必填 | string | - | | type | menu 类型, 当 type 为 1 时表示分类 menu, 类型为 2 时 doc 字段匹配 src 下的组件文件, 类型为3时 doc 字段匹配 docs 下的 md 文件 | MenuTypes | - | | text | menu 所展示的文字, 当设置国际化时可配置英文展示文字 | Record<string, string> | - | | useMobile | 是否在当前文档页显示右侧手机预览, 如不填写, 默认取 config 中的 useMobile | boolean | - |

自定义页面

如果想在组件库中插入其他页面,可以在项目根目录下的创建 pages 文件夹编写 vue 组件, 用来生成其他的页面。 目录结构如下:

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

生成的路由如下:

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

命令相关

启动开发服务器

# playground-ignore
varlet-cli dev
# force mode
varlet-cli dev -f
# draft mode
varlet-cli dev -d

构建文档站点

# playground-ignore
varlet-cli build

预览文档站点

# playground-ignore
varlet-cli preview

构建组件库

# playground-ignore
varlet-cli compile

构建样式变量类型声明文件

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

启动 VSCode 插件开发环境

# playground-ignore
varlet-cli dev:extension

构建 VSCode 插件

# playground-ignore
varlet-cli build:extension

打包字体图标

# playground-ignore
varlet-cli build:icons -w
varlet-cli build:icons

执行所有的单元测试

# playground-ignore
varlet-cli test

执行单个组件的单元测试

# playground-ignore
varlet-cli test -c <componentName>

以 watch 模式执行单元测试

# playground-ignore
varlet-cli test -w

执行所有的单元测试并报告覆盖率

# playground-ignore
varlet-cli test -cov

检查代码

# playground-ignore
varlet-cli lint

校验提交信息

# playground-ignore
varlet-cli commit-lint

显示检查清单

# playground-ignore
varlet-cli checklist

生成更新日志

# playground-ignore
varlet-cli changelog

发布组件库

# playground-ignore
varlet-cli release

生成一个项目模板

# playground-ignore
varlet-cli gen

# Options
-n
--name
  项目名
-s
--sfc
  生成 sfc 风格的项目模板
-t
--tsx
  生成 tsx 格式项目
-l
--locale
  需要支持国际化

创建组件模板文件

# playground-ignore
varlet-cli create

# Options
-n
--name
  组件名
-s
--sfc
  生成 sfc 风格的组件
-t
--tsx
  生成 tsx 风格的文件
-l
--locale
  需要支持国际化

发布前注意

  1. npm 的仓库源必须指向 npm 官方镜像
  2. 执行 npm login 进行登录

问答

如何解决安装 sharp 失败的问题 ?

  • 您可以选择更改包含 sharp 和 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"