关于前端:使用Vuejs编写命令行界面前端开发CLI的利器

前言

大家好,我是webfansplz.继将 Vue 渲染到嵌入式液晶屏后,明天要跟大家分享的是如何将Vue渲染到命令行工具 :).对于命令行工具,大家应该都比拟相熟了,比方vue-cli、Vite等.咱们在编写前端利用面向用户时,通常会十分关注用户体验,作为开发者,咱们在应用工具时,它给予咱们的开发者体验(DX)咱们也会非常关注. 古代前端工程化离不开CLI的开发与应用、那么是否能有较低成本的计划能让前端小伙伴疾速开发CLI,大家能够像编写前端利用一样搞定它.因而,Temir应运而生.

Temir

介绍

Temir,一个用Vue组件来编写命令行界面利用的工具.开发者只须要应用Vue就能够编写命令行利用,不须要任何额定的学习老本.

<script lang="ts" setup>
import { ref } from '@vue/runtime-core'
import { TBox, TText } from '@temir/core'
const counter = ref(0)
setInterval(() => {
  counter.value++
}, 100)
</script>

<template>
  <TBox>
    <TText color="green">
      {{ counter }} tests passed
    </TText>
  </TBox>
</template>

组件

Temir提供了一些根底组件帮忙开发者编写与扩大命令行工具:

文本组件 (Text)

文本组件能够显示文本,将其款式更改为粗体、下划线、斜体或删除线.

<TText color="green">
  I am green
</TText>

<TText color="black" background-color="white">
  I am black on white
</TText>

<TText color="white">
  I am white
</TText>

<TText :bold="true">
  I am bold
</TText>

<TText :italic="true">
  I am italic
</TText>

<TText :underline="true">
  I am underline
</TText>

<TText :strikethrough="true">
  I am strikethrough
</TText>

<TText :inverse="true">
  I am inversed
</TText>

盒子组件 (Box)

<Box>是构建布局必不可少的Temir组件.就像在浏览器中<div style='display: flex'>.它提供了一些构建布局的罕用属性,比方尺寸、内外边距、对齐形式等.

<template>
  <TBox justify-content="flex-start">
    <TText>X</TText>
  </TBox>
  // [X      ]

  <TBox justify-content="center">
    <TText>X</TText>
  </TBox>
  // [   X   ]

  <TBox justify-content="flex-end">
    <TText>X</TText>
  </TBox>
  // [      X]

  <TBox justify-content="space-between">
    <TText>X</TText>
    <TText>Y</TText>
  </TBox>
  // [X      Y]

  <TBox justify-content="space-around">
    <TText>X</TText>
    <TText>Y</TText>
  </TBox>
  // [  X   Y  ]
</template>

换行组件 (Newline)

增加一个或多个换行符(\n)。必须在<Text>组件中应用。

<script>
import { TBox, TNewline, TText } from '@temir/core'
</script>

<template>
  <TBox>
    <TText>
      <TText color="green">
        Hello
      </TText>
      <TNewline />
      <TText color="red">
        World
      </TText>
    </TText>
  </TBox>
</template>

填充组件 (Spacer)

沿其蕴含布局的主轴开展的灵便空间。作为填充元素之间所有可用空间的快捷方式，它十分有用。

例如，在具备默认伸缩方向(row)的<Box>中应用<Spacer>将把”Left”定位到右边，并将”Right”推到左边。

<script lang="ts" setup>
import { TBox, TSpacer, TText } from '@temir/core'
</script>

<template>
  <TBox>
    <TText>Left</TText>
    <TSpacer />
    <TText>Right</TText>
  </TBox>
</template>

超链接组件 (Link)

<script lang="ts" setup>
import { TBox, TText } from '@temir/core'
import TLink from '@temir/link'
</script>

<template>
  <TBox
    :margin="5"
    width="20"
    border-style="round"
    justify-content="center"
  >
    <TLink url="https://github.com">
      <TText color="yellow">
        Hi
      </TText>
      <TText color="cyan">
        Github
      </TText>
    </TLink>
  </TBox>
</template>

加载中组件 (Spinner)

<script lang="ts" setup>
import { TBox, TText } from '@temir/core'
import TSpinner from '@temir/spinner'
</script>

<template>
  <TBox
    :margin="5"
    width="20"
    border-style="round"
    justify-content="center"
  >
    <TText>
      <TText color="yellow">
        <TSpinner />
      </TText>
      Loading
    </TText>
  </TBox>
</template>

标签页组件 (Tab)

<script lang="ts" setup>
import { computed, ref } from '@vue/runtime-core'
import { TBox, TText } from '@temir/core'
import { TTab, TTabs } from '@temir/tab'

const tabs = ['Vue', 'React', 'Angular', 'Solid', 'Svelte']
const activeIndex = ref(0)
const selectedText = computed(() => tabs[activeIndex.value])
</script>

<template>
  <TBox>
    <TText>
      Selected Text :
      <TText color="red">
        {{ selectedText }}
      </TText>
    </TText>
  </TBox>

  <TBox>
    <TTabs :on-change="(index) => activeIndex = +index">
      <TTab v-for="item in tabs" :key="item">
        {{ item }}
      </TTab>
    </TTabs>
  </TBox>
</template>

抉择组件

<script lang="ts" setup>
import TSelectInput from '@temir/select-input'

const items = [
  {
    label: 'Vue',
    value: 'Vue',
  },
  {
    label: 'Vite',
    value: 'Vite',
  },
  {
    label: 'Temir',
    value: 'Temir',
  },
]
function onSelect(value) {
  console.log('selected', value)
}
</script>

<template>
  <TSelectInput :items="items" :on-select="onSelect" />
</template>

装置

npm install @temir/core

应用

<script lang="ts" setup>
import { ref } from '@vue/runtime-core'
import { TBox, TText } from '@temir/core'
const counter = ref(0)
setInterval(() => {
  counter.value++
}, 100)
</script>

<template>
  <TBox>
    <TText color="green">
      {{ counter }} tests passed
    </TText>
  </TBox>
</template>

HMR反对

后面咱们提到了开发者体验(DX),在当初的前端工程中,对开发者很有帮忙且提效的就是HMR,这么香的货色Temir没有理由不领有它,话不多说,间接展现:

开箱即用

应用Temir定制化CLI非常简单,咱们提供了@temir/cli帮忙你疾速构建一个基于Temir的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

你能够通过下载这个例子来疾速开始，你也能够关上 repl.it sandbox来在线体验和尝试它。

演示

Hi Temir

Borders

Table

Vitest

实现

createRenderer

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

Yoga

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

致谢

这个我的项目的灵感来源于ink
vite-node为实现HMR提供了强力的反对

结语

文章到这里就完结了,如果我的文章和我的项目对你有所启发和帮忙,请给一个star反对作者 ✌

关于前端:使用Vuejs编写命令行界面前端开发CLI的利器

前言

Temir

介绍

组件

文本组件 (Text)

盒子组件 (Box)

换行组件 (Newline)

填充组件 (Spacer)

超链接组件 (Link)

加载中组件 (Spinner)

标签页组件 (Tab)

抉择组件

装置

应用

HMR反对

开箱即用

演示

Hi Temir

Borders

Table

Vitest

实现

致谢

结语

评论

发表回复取消回复

更多文章

苹果iOS打包的ipa应用无法安装？一篇文章带你了解可能的原因及排查方法

图解Golang：从零开始实现简易版过期LRU缓存

深入解析：基于Delta的线性数据结构模型，打造高效富文本编辑器

轻松管理社交媒体：使用Automa插件实现一键拉黑功能

关于前端:使用Vuejs编写命令行界面前端开发CLI的利器

前言

Temir

介绍

组件

文本组件 (Text)

盒子组件 (Box)

换行组件 (Newline)

填充组件 (Spacer)

超链接组件 (Link)

加载中组件 (Spinner)

标签页组件 (Tab)

抉择组件

装置

应用

HMR反对

开箱即用

演示

Hi Temir

Borders

Table

Vitest

实现

致谢

结语

评论

发表回复 取消回复

更多文章

苹果iOS打包的ipa应用无法安装？一篇文章带你了解可能的原因及排查方法

图解Golang：从零开始实现简易版过期LRU缓存

深入解析：基于Delta的线性数据结构模型，打造高效富文本编辑器

轻松管理社交媒体：使用Automa插件实现一键拉黑功能

发表回复取消回复