当前位置: 首页 > Web前端 > HTML

使用Vue.js编写命令行界面,前端开发CLI的利器

时间:2023-03-28 15:21:50 HTML

前言大家好,我是webfansplz。在将Vue渲染到嵌入式液晶屏之后,今天要和大家分享的是如何将Vue渲染到命令行工具:)。命令行工具大家应该都不陌生,比如vue-cli、Vite等。我们在为用户编写前端应用的时候,通常会非常注重用户体验。作为开发者,我们在使用工具的时候,也会非常关注它给我们带来的开发者体验(DX)。现代前端工程都离不开CLI的开发和使用,那么有没有一种成本更低的方案可以让前端小伙伴快速开发CLI呢?编写前端应用程序就像编写它一样简单。因此,铁米尔应运而生。Temir引入了Temir,这是一种使用Vue组件编写命令行界面应用程序的工具。开发者只需要使用Vue来编写命令行应用程序,无需任何额外的学习成本。Temir组件提供了一些帮助开发者编写和扩展命令行工具的基础组件:删除线.我是绿色我是白底黑我是白色我是粗体我是斜体我是下划线我是删除线我是倒划线框组件(Box)它是建筑布局的重要Temir组件。就像浏览器中的一样。它提供了构建布局的一些通用属性,例如大小、内外边距、对齐方式等。换行组件(Newline)添加一个或多个换行符(\n)必须在组件中使用。填充组件(Spacer)沿其包含布局的主轴展开的灵活空间。它作为填充元素之间所有可用空间的快捷方式很有用。例如,在具有默认弯曲方向(行)的内使用会将“Left”定位到左侧并将“Right”推到右侧。超级链接组(链接)加载中间组件(Spinner)标签页组件(Tab)选择组件安装npminstall@temir/core使用HMR支持我们前面提到了开发者体验(DX),在现在的前端工程中,HMR对于开发者来说是非常有帮助和高效的。这么好吃的东西,铁木尔没有理由不拥有。话不多说,直接上图:开箱即用的铁米尔定制CLI,非常简单。很简单,我们提供@temir/cli来帮助您快速构建基于Temir的CLI。mkdirmy-temir-clidmy-temir-clitouchmain.tsnpminstall@temir/cl#Dev(development)temirmain.ts#Build(Package)temirbuildmain.ts你可以通过下载这个例子快速开始,你也可以打开repl.it沙盒在线体验试玩demoHiTemirBordersTableVitest实现createRendererTemir主要得益于Vue3优秀的跨平台能力,我们可以通过createRendererAPI创建自定义渲染器,通过在宿主环境,对元素进行增删改查。YogaVue提供了一个在命令行界面上运行的界面,所以我们还缺少一个布局引擎你可以将Vue作为一个命令行工具来运行。Temir使用Yoga,一种Flexbox布局引擎。使用您在构建浏览器应用程序时使用的类似CSS的属性来为您的CLI构建出色的用户界面。致谢本项目的灵感来源于inkvite-node,为HMR的实现提供了强有力的支持。结语到此结束。如果我的文章和项目对你有启发和帮助,请给个star支持作者?