无论是 vue2 全家桶还是 vue3 + vite + TypeScript，组件库的使用几乎大家都会，但自己开发一个独立组件库就不是每个人都掌握的，因为搭建组件库的基础开发环境，就会让很多同学望而却步。一个组件库应该至少要包括三个方面：
这几天 程序员优雅哥 搭建了一个组件库的基础脚手架：
vue3-component-library-archetype
在这个脚手架的基础上，大家可以使用内置的 cli 快速创建新组件，按照套路开发组件及文档即可。脚手架很大程度上简化了环境的搭建、打包的配置、类型定义的抽取等工具，开箱即用，大家可以将注意力集中到组件本身的开发上。
脚手架采用 monorepo 风格，使用 pnpm 作为包管理工具。
git clone git@github.com:HeroCloudy/vue3-component-library-archetype.git
如果您没有安装 pnpm，需要先按照 pnpm
npm install -g pnpm
安装依赖：
pnpm i
在 example 中开发组件，使用命令：
pnpm run dev:dev
访问地址为 http://localhost:3000/
在组件库文档中开发组件，使用命令：
pnpm run docs:dev
访问地址为 http://localhost:3100/
组件库文档界面如下：
pnpm run gen:component
按照提示输入组件名称、组件中文名称、组件类型（.tsx 或 .vue）。
执行命令创建完组件后，会自动在组件库中注册该组件，同时自动生成文档模板及文档中的 demo，无需任何手动配置。
pnpm run build:docs
打包构建后的文件位于 docs/.vitepress/dist 目录
pnpm run build:dev
打包构建后的文件位于 dist 目录
组件库打包：
pnpm run build:lib
在发布 npm 前可以在本地私服进行测试。
启动本地私服：
pnpm run start:verdaccio
启动成功后在浏览器中访问 http://localhost:4873/
如果初次使用，需要创建用户。
发布组件库到本地私服中：
pnpm run pub:local
组件库的命令入口均在根目录的 package.json 中的 scripts 中。由于采用了 monorepo 的方式，大多命令的实现都在各自的模块中。
所有命令如下：
- dev:dev
- dev:uat
- dev:prod
- build:dev
- build:uat
- build:prod
- preview:example
- build:lib
- docs:dev
- docs:build
- docs:preview
- gen:component
- start:verdaccio
- pub:local
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:lib
打包组件库，打包生成的文件位于项目根目录的 lib 目录
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
发布组件库到本地私服。
If you have any questions, please contact me
后面的专题将分享这个脚手架的实现过程，和大家一步步实现这个脚手架，并基于该脚手架实现 JSON Schema 表单、列表等组件，并在 example 中开发通用后台管理系统。
感谢你阅读本文，如果本文给了你一点点帮助或者启发，还请三连支持一下，点赞、关注、收藏，作者会持续与大家分享更多干货
使用带有Rails插件的vim，您可以创建一个迁移文件，然后一次性打开该文件吗？textmate也可以这样吗？ 最佳答案 你可以使用rails.vim然后做类似的事情::Rgeneratemigratonadd_foo_to_bar插件将打开迁移生成的文件，这正是您想要的。我不能代表textmate。 关于ruby-使用VimRails，您可以创建一个新的迁移文件并一次性打开它吗？，我们在StackOverflow上找到一个类似的问题： https://sta
我需要从一个View访问多个模型。以前，我的links_controller仅用于提供以不同方式排序的链接资源。现在我想包括一个部分(我假设)显示按分数排序的顶级用户(@users=User.all.sort_by(&:score))我知道我可以将此代码插入每个链接操作并从View访问它，但这似乎不是“ruby方式”，我将需要在不久的将来访问更多模型。这可能会变得很脏，是否有针对这种情况的任何技术？注意事项:我认为我的应用程序正朝着单一格式和动态页面内容的方向发展，本质上是一个典型的网络应用程序。我知道before_filter但考虑到我希望应用程序进入的方向，这似乎很麻烦。最终从任何
我想要做的是有2个不同的Controller，client和test_client。客户端Controller已经构建，我想创建一个test_clientController，我可以使用它来玩弄客户端的UI并根据需要进行调整。我主要是想绕过我在客户端中内置的验证及其对加载数据的管理Controller的依赖。所以我希望test_clientController加载示例数据集，然后呈现客户端Controller的索引View，以便我可以调整客户端UI。就是这样。我在test_clients索引方法中试过这个:classTestClientdefindexrender:template=>
我想用ruby编写一个小的命令行实用程序并将其作为gem分发。我知道安装后，Guard、Sass和Thor等某些gem可以从命令行自行运行。为了让gem像二进制文件一样可用，我需要在我的gemspec中指定什么。 最佳答案 Gem::Specification.newdo|s|...s.executable='name_of_executable'...endhttp://docs.rubygems.org/read/chapter/20 关于ruby-在Ruby中编写命令行实用程序
我正在编写一个包含C扩展的gem。通常当我写一个gem时，我会遵循TDD的过程，我会写一个失败的规范，然后处理代码直到它通过，等等......在“ext/mygem/mygem.c”中我的C扩展和在gemspec的“扩展”中配置的有效extconf.rb，如何运行我的规范并仍然加载我的C扩展？当我更改C代码时，我需要采取哪些步骤来重新编译代码？这可能是个愚蠢的问题，但是从我的gem的开发源代码树中输入“bundleinstall”不会构建任何native扩展。当我手动运行rubyext/mygem/extconf.rb时，我确实得到了一个Makefile(在整个项目的根目录中)，然后当
如果您尝试在Ruby中的nil对象上调用方法，则会出现NoMethodError异常并显示消息:"undefinedmethod‘...’fornil:NilClass"然而，有一个tryRails中的方法，如果它被发送到一个nil对象，它只返回nil:require'rubygems'require'active_support/all'nil.try(:nonexisting_method)#noNoMethodErrorexceptionanymore那么try如何在内部工作以防止该异常？ 最佳答案 像Ruby中的所有其他对象
关闭。这个问题需要detailsorclarity.它目前不接受答案。想改进这个问题吗？通过editingthispost添加细节并澄清问题.关闭8年前。Improvethisquestion为什么SecureRandom.uuid创建一个唯一的字符串？SecureRandom.uuid#=>"35cb4e30-54e1-49f9-b5ce-4134799eb2c0"SecureRandom.uuid方法创建的字符串从不重复？
我已经在Sinatra上创建了应用程序，它代表了一个简单的API。我想在生产和开发上进行部署。我想在部署时选择，是开发还是生产，一些方法的逻辑应该改变，这取决于部署类型。是否有任何想法，如何完成以及解决此问题的一些示例。例子:我有代码get'/api/test'doreturn"Itisdev"end但是在部署到生产环境之后我想在运行/api/test之后看到ItisPROD如何实现？ 最佳答案 根据SinatraDocumentation:EnvironmentscanbesetthroughtheRACK_ENVenvironm
我有一个正在构建的应用程序，我需要一个模型来创建另一个模型的实例。我希望每辆车都有4个轮胎。汽车模型classCar轮胎模型classTire但是，在make_tires内部有一个错误，如果我为Tire尝试它，则没有用于创建或新建的activerecord方法。当我检查轮胎时，它没有这些方法。我该如何补救？错误是这样的:未定义的方法'create'forActiveRecord::AttributeMethods::Serialization::Tire::Module我测试了两个环境:测试和开发，它们都因相同的错误而失败。 最佳答案
我们的git存储库中目前有一个Gemfile。但是，有一个gem我只在我的环境中本地使用(我的团队不使用它)。为了使用它，我必须将它添加到我们的Gemfile中，但每次我checkout到我们的master/dev主分支时，由于与跟踪的gemfile冲突，我必须删除它。我想要的是类似Gemfile.local的东西，它将继承从Gemfile导入的gems，但也允许在那里导入新的gems以供使用只有我的机器。此文件将在.gitignore中被忽略。这可能吗？ 最佳答案 设置BUNDLE_GEMFILE环境变量:BUNDLE_GEMFI