关于前端:使用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 反对作者 ✌