- Java锁的逻辑(结合对象头和ObjectMonitor)
- 还在用饼状图?来瞧瞧这些炫酷的百分比可视化新图形(附代码实现)⛵
- 自动注册实体类到EntityFrameworkCore上下文,并适配ABP及ABPVNext
- 基于Sklearn机器学习代码实战
上文创建了一堆 utils、component-info,并实现了新组件模块相关目录和文件的创建。本文继续实现后面的内容.
在 src/service 目录中创建 init-scss.ts 文件,该文件导出 initScss 函数.
由于 .vue 类型的组件的样式就直接写在了 style 中,故首先判断组件类型是否是 tsx ,tsx 类型的组件才进行这一步的操作:
代码实现如下:
import { ComponentInfo } from '../domain/component-info'
import path from 'path'
import { scssTemplate } from '../util/template-utils'
import fs from 'fs'
import { g } from '../util/log-utils'
const updateComponentScssIndex = (scssRootPath: string, lineName: string) => {
const indexScssPath = path.resolve(scssRootPath, 'components/index.scss')
const content = fs.readFileSync(indexScssPath).toString()
const newContent = content.substring(0, content.length) + `@use "${lineName}.module";\n`
fs.writeFileSync(indexScssPath, newContent)
}
/**
* 创建组件库 scss 文件,并在 scss/components/index.scss 中引入该文件
*/
export const initScss = (componentInfo: ComponentInfo) => new Promise((resolve, reject) => {
// tsx 类型需要创建scss文件
if (componentInfo.type === 'tsx') {
const { parentPath, lineName, lineNameWithPrefix } = componentInfo
// scss 根目录(packages/scss)
const scssRootPath = path.resolve(parentPath, 'scss')
// 1. 创建组件的 scss 文件
const componentScssPath = path.resolve(scssRootPath, `components/_${lineName}.module.scss`)
fs.writeFileSync(componentScssPath, scssTemplate(lineNameWithPrefix))
// 2. 在组件库 scss 入口文件 (packages/components/index.scss)引入上面创建的文件
updateComponentScssIndex(scssRootPath, lineName)
g('component scss init success')
}
resolve(componentInfo)
})
上面的 init-scss.ts 在创建 scss 文件时调用了 template-utils.ts 中的 scssTemplate 函数获取模板。故需要在 util/template-utils.ts 中添加该函数:
/**
* scss 文件模板
*/
export const scssTemplate = (lineNameWithPrefix: string): string => {
return `@import "../tools";
@import "../acss/mp";
@import "../base/var.module";
@include b('${lineNameWithPrefix}') {
}
`
}
新组件和样式创建完成,接下来便是将新组件模块安装到组件库入口模块的依赖中。在 src/service 目录中创建 update-component-lib.ts 文件,该文件导出函数 updateComponentLib 。该函数需要完成两件事:
代码实现如下:
import { ComponentInfo } from '../domain/component-info'
import { execCmd } from '../util/cmd-utils'
import path from 'path'
import { Config } from '../config'
import fs from 'fs'
import { g } from '../util/log-utils'
const updateComponentLibIndex = (libPath: string, componentInfo: ComponentInfo) => {
const indexPath = path.join(libPath, 'index.ts')
const content = fs.readFileSync(indexPath).toString()
const index1 = content.indexOf('// import component end')
const index2 = content.indexOf('] // components')
const result = `${content.substring(0, index1)}` +
`import ${componentInfo.upCamelName} from '${componentInfo.nameWithLib}'\n` +
content.substring(index1, index2 - 1) +
`,\n ${componentInfo.upCamelName}\n` +
content.substring(index2)
fs.writeFileSync(indexPath, result)
}
/**
* 更新组件库入口
*/
export const updateComponentLib = async (componentInfo: ComponentInfo) => {
// 组件库入口的路径
const libPath = path.resolve(componentInfo.parentPath, Config.COMPONENT_LIB_NAME)
// 1. 添加新创建的组件到依赖中
await execCmd(`cd ${libPath} && pnpm install ${componentInfo.nameWithLib}`)
// 2. 更新入口 index.ts
updateComponentLibIndex(libPath, componentInfo)
g('component library update success')
}
在 src/service 目录中创建 init-doc.ts 文件,该文件导出函数 initDoc 。该函数需要完成三件事:
代码实现如下:
import { ComponentInfo } from '../domain/component-info'
import { g } from '../util/log-utils'
import path from 'path'
import fs from 'fs'
import { demoTemplate, mdTemplate } from '../util/template-utils'
/**
* 创建组件文档、demo及更新菜单
*/
export const initDoc = (componentInfo: ComponentInfo) => {
// 组件库文档根路径
const docRootPath = path.resolve(componentInfo.parentPath, '../docs')
const { lineName, lineNameWithPrefix, upCamelName, zhName } = componentInfo
// 1. 创建组件的 MD 文档
fs.writeFileSync(path.resolve(docRootPath, `components/${lineName}.md`), mdTemplate(componentInfo))
// 2. 创建组件文档中的 Demo
fs.mkdirSync(path.resolve(docRootPath, `demos/${lineName}`))
fs.writeFileSync(path.resolve(docRootPath, `demos/${lineName}/${lineName}-1.vue`), demoTemplate(lineNameWithPrefix))
// 3. 更新组件库文档菜单
const menuPath = path.resolve(docRootPath, 'components.ts')
const content = fs.readFileSync(menuPath).toString()
const index = content.indexOf('] // end')
const result = content.substring(0, index - 1) +
`,\n { text: '${upCamelName} ${zhName}', link: '/components/${lineName}' }\n` +
content.substring(index)
fs.writeFileSync(menuPath, result)
g('component document init success')
}
上面的 init-doc.ts 调用了 mdTemplate 和 demoTemplate 两个函数,在 template-utils.ts 中添加这两个函数:
export const mdTemplate = (componentInfo: ComponentInfo) => {
return `
# ${componentInfo.upCamelName} ${componentInfo.zhName}
## 基本使用
<preview path="../demos/${componentInfo.lineName}/${componentInfo.lineName}-1.vue" title="基本使用" description=" "></preview>
## 组件 API
### Attributes 属性
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
| ---- | ---- | ---- | ---- | ---- |
| | | | | |
### Methods 方法
| 方法名 | 说明 | 参数 | 返回值 |
| ---- | ---- | ---- | ---- |
| | | | |
### Events 事件
| 事件名 | 说明 | 参数 | 返回值 |
| ---- | ---- | ---- | ---- |
| | | | |
### Slots 插槽
| 插槽名 | 说明 | 参数 |
| ---- | ---- | ---- |
| | | |
`
}
export const demoTemplate = (lineNameWithPrefix: string) => {
return `<template>
<${lineNameWithPrefix}></${lineNameWithPrefix}>
</template>
<script lang="ts" setup>
</script>
<style scoped lang="scss">
</style>
`
}
这两个函数的模板可以自己去定义.
四个步骤都已实现,最后需要在 src/command/create-component.ts 文件中的 createNewComponent 函数中完成上面四个 service 的调用.
导入四个service及使用到的其他函数:
import { ComponentInfo } from '../domain/component-info'
import { closeLoading, showLoading } from '../util/loading-utils'
import { g, r } from '../util/log-utils'
import { initComponent } from '../service/init-component'
import { initScss } from '../service/init-scss'
import { updateComponentLib } from '../service/update-component-lib'
import { initDoc } from '../service/init-doc'
该函数首先根据用户输入,构造 ComponentInfo 对象,然后依次调用引入的四个 service,完成组件创建的全部流程:
const createNewComponent = async (componentName: string, description: string, componentType: string) => {
console.log(componentName, description, componentType)
showLoading('Generating, please wait...')
try {
// 1. 构造 ComponentInfo 对象
const componentInfo = new ComponentInfo(componentName, description, componentType)
// 2. 创建组件目录及文件
await initComponent(componentInfo)
// 3. 创建样式
await initScss(componentInfo)
// 4. 更新组件库入口
await updateComponentLib(componentInfo)
// 5. 组件库文档
initDoc(componentInfo)
closeLoading()
g(`component [${componentInfo.lineName} ${componentInfo.zhName}] created done!`)
} catch (e: any) {
closeLoading()
r(e.message)
}
}
组件库 cli 就这样完成了。运行 pnpm run gen ,依次输入组件名、组件中文名,选择组件类型,便自动完成组件的创建、注册、文档的创建了。优雅哥花了大量篇幅介绍 cli 的开发,不仅仅可以在这里使用,通过本案例的实现,希望大家可以将这种方式移植到其他地方,如从 github 拉取代码模板、自动化 CI/CD 等.
下一篇文章将介绍组件库的打包构建和发布.
感谢阅读本文,如果本文给了你一点点帮助或者启发,还请三连支持一下,了解更多内容工薇号“程序员优雅哥”.
最后此篇关于Vue3企业级优雅实战-组件库框架-10实现组件库cli-下的文章就讲到这里了,如果你想了解更多关于Vue3企业级优雅实战-组件库框架-10实现组件库cli-下的内容请搜索CFSDN的文章或继续浏览相关文章,希望大家以后支持我的博客! 。
背景: 我最近一直在使用 JPA,我为相当大的关系数据库项目生成持久层的轻松程度给我留下了深刻的印象。 我们公司使用大量非 SQL 数据库,特别是面向列的数据库。我对可能对这些数据库使用 JPA 有一
我已经在我的 maven pom 中添加了这些构建配置,因为我希望将 Apache Solr 依赖项与 Jar 捆绑在一起。否则我得到了 SolarServerException: ClassNotF
interface ITurtle { void Fight(); void EatPizza(); } interface ILeonardo : ITurtle {
我希望可用于 Java 的对象/关系映射 (ORM) 工具之一能够满足这些要求: 使用 JPA 或 native SQL 查询获取大量行并将其作为实体对象返回。 允许在行(实体)中进行迭代,并在对当前
好像没有,因为我有实现From for 的代码, 我可以转换 A到 B与 .into() , 但同样的事情不适用于 Vec .into()一个Vec . 要么我搞砸了阻止实现派生的事情,要么这不应该发
在 C# 中,如果 A 实现 IX 并且 B 继承自 A ,是否必然遵循 B 实现 IX?如果是,是因为 LSP 吗?之间有什么区别吗: 1. Interface IX; Class A : IX;
就目前而言,这个问题不适合我们的问答形式。我们希望答案得到事实、引用资料或专业知识的支持,但这个问题可能会引发辩论、争论、投票或扩展讨论。如果您觉得这个问题可以改进并可能重新打开,visit the
我正在阅读标准haskell库的(^)的实现代码: (^) :: (Num a, Integral b) => a -> b -> a x0 ^ y0 | y0 a -> b ->a expo x0
我将把国际象棋游戏表示为 C++ 结构。我认为,最好的选择是树结构(因为在每个深度我们都有几个可能的移动)。 这是一个好的方法吗? struct TreeElement{ SomeMoveType
我正在为用户名数据库实现字符串匹配算法。我的方法采用现有的用户名数据库和用户想要的新用户名,然后检查用户名是否已被占用。如果采用该方法,则该方法应该返回带有数据库中未采用的数字的用户名。 例子: “贾
我正在尝试实现 Breadth-first search algorithm , 为了找到两个顶点之间的最短距离。我开发了一个 Queue 对象来保存和检索对象,并且我有一个二维数组来保存两个给定顶点
我目前正在 ika 中开发我的 Python 游戏,它使用 python 2.5 我决定为 AI 使用 A* 寻路。然而,我发现它对我的需要来说太慢了(3-4 个敌人可能会落后于游戏,但我想供应 4-
我正在寻找 Kademlia 的开源实现C/C++ 中的分布式哈希表。它必须是轻量级和跨平台的(win/linux/mac)。 它必须能够将信息发布到 DHT 并检索它。 最佳答案 OpenDHT是
我在一本书中读到这一行:-“当我们要求 C++ 实现运行程序时,它会通过调用此函数来实现。” 而且我想知道“C++ 实现”是什么意思或具体是什么。帮忙!? 最佳答案 “C++ 实现”是指编译器加上链接
我正在尝试使用分支定界的 C++ 实现这个背包问题。此网站上有一个 Java 版本:Implementing branch and bound for knapsack 我试图让我的 C++ 版本打印
在很多情况下,我需要在 C# 中访问合适的哈希算法,从重写 GetHashCode 到对数据执行快速比较/查找。 我发现 FNV 哈希是一种非常简单/好/快速的哈希算法。但是,我从未见过 C# 实现的
目录 LRU缓存替换策略 核心思想 不适用场景 算法基本实现 算法优化
1. 绪论 在前面文章中提到 空间直角坐标系相互转换 ,测绘坐标转换时,一般涉及到的情况是:两个直角坐标系的小角度转换。这个就是我们经常在测绘数据处理中,WGS-84坐标系、54北京坐标系
在软件开发过程中,有时候我们需要定时地检查数据库中的数据,并在发现新增数据时触发一个动作。为了实现这个需求,我们在 .Net 7 下进行一次简单的演示. PeriodicTimer .
二分查找 二分查找算法,说白了就是在有序的数组里面给予一个存在数组里面的值key,然后将其先和数组中间的比较,如果key大于中间值,进行下一次mid后面的比较,直到找到相等的,就可以得到它的位置。
我是一名优秀的程序员,十分优秀!