@varlet/cli NPM

组件库快速成型工具

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

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

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

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

高级定制

项目根目录下的 varlet.config.mjs 用来管理整个组件库项目的具体细节。默认配置可查阅 varlet.default.config.ts。也可以参考 @varlet/ui 的 varlet.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	`-`

参数	说明	类型	默认值
`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
# set port number
varlet-cli preview -p <port>

# playground-ignore
varlet-cli compile

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

# playground-ignore
varlet-cli dev:extension

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

# playground-ignore
varlet-cli test -w

# playground-ignore
varlet-cli test -cov

# 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
  需要支持国际化

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

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

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

12 months ago

12 months ago

12 months ago

组件库快速成型工具

介绍

特性

快速开始

高级定制

配置文件

Menu

自定义页面

命令相关

启动开发服务器

构建文档站点

预览文档站点

构建组件库

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

启动 VSCode 插件开发环境

构建 VSCode 插件

打包字体图标

执行所有的单元测试

执行单个组件的单元测试

以 watch 模式执行单元测试

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

校验提交信息

显示检查清单

生成更新日志

发布组件库

生成一个项目模板

创建组件模板文件

发布前注意

问答

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