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

复制代码

 I am green


 I am black on white


 I am white


 I am bold


 I am italic


 I am underline


 I am strikethrough


 I am inversed

复制代码

.它提供了一些构建布局的常用属性,比如尺寸、内外边距、对齐方式等.

复制代码

换行组件 (Newline)

添加一个或多个换行符(\n)。 必须在组件中使用。

复制代码

填充组件 (Spacer)

沿其包含布局的主轴展开的灵活空间。 作为填充元素之间所有可用空间的快捷方式，它非常有用。

例如，在具有默认伸缩方向(row)的中使用将把"Left"定位到左边，并将"Right"推到右边。

复制代码

超链接组件 (Link)

复制代码

加载中组件 (Spinner)

复制代码

标签页组件 (Tab)

复制代码

选择组件

复制代码

安装

npm install @temir/core
复制代码

使用

复制代码

HMR支持

前面我们提到了开发者体验(DX),在现在的前端工程中,对开发者很有帮助且提效的就是HMR,这么香的东西Temir[6]没有理由不拥有它,话不多说,直接展示:

开箱即用

使用Temir[7]定制化CLI非常简单,我们提供了\@temir/cli[8]帮助你快速构建一个基于Temir[9]的CLI.

mkdir my-temir-cli
cd my-temir-cli
touch main.ts
npm install @temir/cl
# Dev (开发)
temir main.ts
# Build (打包)
temir build main.ts
复制代码

你可以通过下载这个 例子[10] 来快速开始，你也可以打开 repl.it sandbox[11]来在线体验和尝试它。

演示

Hi Temir[12]

Borders[13]

Table[14]

Vitest[15]

实现

•  createRenderer

Temir的实现主要得益于Vue3出色的跨平台能力,我们可以通过createRenderer[16] API创建一个自定义渲染器,通过创建宿主环境中对应的Node和Element,并对元素进行增删改查操作.

•  Yoga

Vue提供了跑在命令行界面的接口,那我们就还缺少一个布局引擎就能把Vue 跑在命令行工具了.Temir使用了Yoga,一款Flexbox布局引擎.使用你在构建浏览器应用时使用过的类似CSS的属性，为你的CLI构建出色的用户界面。

致谢

•  这个项目的灵感来源于ink[17]
•  vite-node[18]为实现HMR提供了强力的支持

结语

文章到这里就结束了,如果我的文章和项目对你有所启发和帮助,请给一个star[19]支持作者

当前标题：使用Vue.js编写命令行界面,前端开发CLI的利器
当前链接：http://www.shufengxianlan.com/qtweb/news11/521961.html

网站建设、网络推广公司-创新互联，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联