搭建自己的前端组件库-项目搭建

varlet-cli

看了很多文章,找了很多资料.正所谓,适合自己的才是最好的.我的目的就是想专注于组件功能,降低文档编写的负担.于是我选择Varlet Cli.这是一个开箱即用的 Vue3 组件库 快速成型工具，提供了一系列命令和工具去解决组件库开发上的问题.
具体情况可以看官方文档.

初始化

请确保已经安装了 node 10+的稳定版本

# 安装pnpm
npm install pnpm -g
# 安装命令行工具
pnpm add @varlet/cli -g
# 使用 gen 命令生成项目
varlet-cli gen 项目名
cd 项目名
pnpm install
pnpm dev

创建组件

# 使用脚手架工具提供的生产组件的命令,可以快速创建模板文件
varlet-cli create componentName

可以看到 src 下已经生成了我们输入的组件名对应的文件夹

添加文档

varlet.config.js

module.exports = {
  ...
  pc: {
    ...
    menu: [
      ...
      {
        text: {
          'zh-CN': 'componentName',
        },
        doc: 'componentName',
        type: 2, // 1-组名,2-组件名
      },
    ]
  }
}