Vue3 企业级优雅实战 - 组件库框架 - 9 实现组件库 cli - 上

上文搭建了组件库 cli 的基础架子，实现了创建组件时的用户交互，但遗留了 cli/src/command/create-component.ts 中的 createNewComponent 函数，该函数要实现的功能就是上文开篇提到的 —— 创建一个组件的完整步骤。本文咱们就依次实现那些步骤。（友情提示：本文内容较多，如果你能耐心看完、写完，一定会有提升）

1 创建工具类

在实现 cli 的过程中会涉及到组件名称命名方式的转换、执行cmd命令等操作，所以在开始实现创建组件前，先准备一些工具类。

在 cli/src/util/ 目录上一篇文章中已经创建了一个 log-utils.ts 文件，现继续创建下列四个文件：cmd-utils.ts、loading-utils.ts、name-utils.ts、template-utils.ts

1.1 name-utils.ts

该文件提供一些名称组件转换的函数，如转换为首字母大写或小写的驼峰命名、转换为中划线分隔的命名等：

/**
 * 将首字母转为大写
 */
export const convertFirstUpper = (str: string): string => {
   
  return `${
     str.substring(0, 1).toUpperCase()}${
     str.substring(1)}`
}
/**
 * 将首字母转为小写
 */
export const convertFirstLower = (str: string): string => {
   
  return `${
     str.substring(0, 1).toLowerCase()}${
     str.substring(1)}`
}
/**
 * 转为中划线命名
 */
export const convertToLine = (str: string): string => {
   
  return convertFirstLower(str).replace(/([A-Z])/g, '-$1').toLowerCase()
}
/**
 * 转为驼峰命名（首字母大写）
 */
export const convertToUpCamelName = (str: string): string => {
   
  let ret = ''
  const list = str.split('-')
  list.forEach(item => {
   
    ret += convertFirstUpper(item)
  })
  return convertFirstUpper(ret)
}
/**
 * 转为驼峰命名（首字母小写）
 */
export const convertToLowCamelName = (componentName: string): string => {
   
  return convertFirstLower(convertToUpCamelName(componentName))
}

1.2 loading-utils.ts

在命令行中创建组件时需要有 loading 效果，该文件使用 ora 库，提供显示 loading 和关闭 loading 的函数：

import ora from 'ora'

let spinner: ora.Ora | null = null

export const showLoading = (msg: string) => {
   
  spinner = ora(msg).start()
}

export const closeLoading = () => {
   
  if (spinner != null) {
   
    spinner.stop()