fe-core-cli

# Ksg-UI ### 介绍 fast-vue3-lib 开源的 Vue3 + Typescript 组件库开发模板；简单轻松构建功能完善的组件库，按照约定的目录编排来进行开发，使开发者只需关注组件的开发以及说明文档的编写，无需关注其他繁琐的配置。相信许多团队都希望沉淀出一套组件库，更加贴合业务，但是大部分人都困在组件库开发的前期构建以及打包阶段，而fast-vue3-lib就是为此而生。同时，我们使用pnpm管理多包，也可集成所有的团队的基建在一个仓库，比如 `@xxx/utils`、`@xxx/components`、`@xxx/cli` ### 特性有以下的特性： + 基于 antdv 二次开发（也无需重复造轮子） + 更贴近业务，开箱即用高质量的vue3组件 + 约定式开发，大幅减轻开发者工作量 + 已经完成组件库前期构建和打包阶段，只需要关注到组件的开发（内置发版本规则和指令） + 按照约定目录进行开发，打包后的组件库能够支持按需导入，完美配合TreeShaking + 集成 Vitepress，按照约定位置创建文件会自动配置路由，只需要关注文档内容的编写 + 对测试环境支持约定式路由写法，无需编写路由文件（example调试组件） + 通过命令行来创建组件文件，减去繁琐的文件创建过程 + 通过简单的修改环境变量来修改开发方式基于 Vue3 + Vite 独立组件库脚手架，可在此基础上定制化开发企业级或个人的组件库。脚手架采用 monorepo 风格，使用 pnpm 作为包管理工具。 ## 组件库脚手架内容 - 组件库开发、打包、发布 - 组件库文档docs 编写、打包、一套代码编写和演示 Demo - 快速创建组件命令行 cli - 组件库搭建的 example 演示 - 专门管理打包的模块build ## 组件库脚手架技术栈 - Vite 3 - Vue 3 - TypeScript - Vitepress 1.0 - ESLint - Rollup - Gulp ## 使用说明 #### 克隆代码到本地： ```shell # main 分支 git clone git@git.corp.xxx.com:ksg-frontend/ksg-ui.git ``` #### 安装依赖如果您没有安装 pnpm，需要先安装 pnpm ```shell npm install -g pnpm ``` 安装依赖： ```shell pnpm i ``` #### 本地开发在 example 中开发组件，使用命令： ```shell pnpm run dev:dev ``` 访问地址为 http://localhost:3000/ 在组件库文档中开发组件，使用命令： ```shell pnpm run docs:dev ``` 访问地址为 http://localhost:3100/ #### 创建新组件 ```shell pnpm run gen:component ``` 按照提示输入组件名称、组件中文名称、组件类型（.tsx 或 .vue） #### 构建文档 ```shell pnpm run build:docs ``` 打包构建后的文件位于 _docs/.vitepress/dist_ 目录 #### 构建 example ```shell pnpm run build:dev ``` 打包构建后的文件位于 _dist_ 目录 #### 构建 utils ```shell pnpm run build:utils ``` 打包构建后的文件位于 _dist_ 目录 #### 发布组件库 1. 组件库打包： ```shell pnpm run build:lib ``` 2. 组件库发版 - 在发布 npm 前可以在本地私服进行测试。 ```shell # 启动本地私服： # 启动成功后在浏览器中访问 http://localhost:4873/ pnpm run start:verdaccio # 发布组件库到本地私服中 pnpm run pub:local ``` - 发布正式npm ```shell # 通过changeset来进行多包管理和发版 # 生成 chanegset 文件 pnpm changeset # 更新版本号、生成change log pnpm version-pak # 发布版本到npm pnpm release:only ``` 3. ## 组件库命令说明组件库的命令入口均在根目录的 _package.json_ 中的 _scripts_ 中。由于采用了 monorepo 的方式，大多命令的实现都在各自的模块中。所有命令如下： ``` - dev:dev - dev:uat - dev:prod - build:dev - build:uat - build:prod - preview:example - clear - build - build:lib - build:utils - build:theme - docs:dev - docs:build - docs:preview - gen:component - start:verdaccio - pub:local - changeset - version-pak - publish:only - release - release:beta ``` #### pnpm run dev:dev 本地开发 example，使用 dev 环境配置，访问地址为 http://localhost:3000/ #### pnpm run dev:uat 本地开发 example，使用 uat 环境配置，访问地址为 http://localhost:3000/ #### pnpm run dev:prod 本地开发 example，使用 prod 环境配置，访问地址为 http://localhost:3000/ #### pnpm run build:dev 打包 dev 环境 example，打包生成的文件位于项目根目录的 _dist_ 目录 #### pnpm run build:uat 打包 uat 环境 example，打包生成的文件位于项目根目录的 _dist_ 目录 #### pnpm run build:prod 打包 prod 环境 example，打包生成的文件位于项目根目录的 _dist_ 目录 #### pnpm run preview:example 预览打包后的 example，访问地址为：http://localhost:4173/ #### pnpm run build 打包组件库、工具库、样式库 #### pnpm run build:utils 打包工具库，打包生成的文件位于项目根目录的 _dist_ 目录 #### pnpm run build:theme-chalk 打包样式库，打包生成的文件位于项目根目录的 _dist_ 目录 #### pnpm run build:lib 打包组件库，打包生成的文件位于项目根目录的 _lib、esm、theme-chalk_ 目录 #### pnpm run docs:dev 本地开发组件库文档，访问地址为：http://localhost:3100/ #### pnpm run docs:build 组件库文档打包，打包生成的文件位于项目根目录下的 _docs/.vitepress/dist_ 目录 #### pnpm run docs:preview 预览打包后的组件库文档，访问地址为：http://localhost:4173/ #### pnpm run gen:component 快速创建新组件。依次输入组件名、组件描述（中文名称）、组件类型（tsx \ vue）即可自动生成组件并完成配置。使用该命令可避免组件开发人员分散精力到各种配置、基础目录和文件的创建中，可以让其聚焦于组件本身的开发。 #### pnpm run start:verdaccio 启动 verdaccio。本地开发时，使用 verdaccio 作为测试使用的本地 npm 私服。使用该命令启动 verdaccio 私服，启动成功后在浏览器中访问 http://localhost:4873/ 如果初次使用，需要创建用户，可以搜索 _verdaccio_，查看其具体使用。 #### pnpm run pub:local 发布组件库到本地私服。 #### pnpm run changeset 多包管理，生成changeset文件 #### pnpm run version-pak 消耗changeset文件，更新包版本、生成changelog #### pnpm run publish:only 发布组件库到npm服务。 #### pnpm run release:beta 一键发布测试版本 #### pnpm run release 一键发布版本，但是不发布到npm,只是做好全部准备