该项目已停止维护，请使用 Vue TermUI 替代。

简体中文 | English

使用Vue组件构建你的命令行界面应用

Temir提供了与Vue在浏览器基于组件的UI构建体验相同，但是它面向的是命令行应用。

它使用 Yoga 在终端构建Flexbox布局，所以许多和CSS一样的属性在Temir中一样可用。如果你已经熟悉Vue.js，那么其实你已经熟悉Temir了。

由于 Temir 是一个Vue渲染器，这意味着Vue的大多数特性都得到了支持。

本文档只介绍关于Temir的使用方法，关于Vue可查看官方文档。

安装

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支持

内容

快速开始
组件
- <Text>
- <Box>
- <Newline>
- <Spacer>
- <Link>
- <Tab>
- <Spinner>
- <SelectInput>
- 💻 持续补充中，欢迎贡献。
例子
- hi-temir
- borders
- table
- temir-link
- temir-spinner
- temir-tab
- temir-select-input
- Vitest

快速开始

使用 @temir/cli 快速搭建一个基于Temir的CLI。

mkdir my-temir-cli

cd my-temir-cli

touch main.ts

npm install @temir/cli

# Dev (开发)

temir main.ts

# Build (打包)

temir build main.ts

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

Temir 使用 Yoga - 一款Flexbox布局引擎使用你在构建浏览器应用时使用过的类似CSS的属性，为你的CLI构建出色的用户界面。重要的是要记住，每个元素都是一个Flexbox容器。可以认为浏览器中的每个

都有display: flex。有关如何在Temir中使用Flexbox布局的文档，请参阅下面的内置组件。注意，所有文本都必须包装在组件中。

组件

`<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>
  I am bold
</TText>

<TText italic>
  I am italic
</TText>

<TText underline>
  I am underline
</TText>

<TText strikethrough>
  I am strikethrough
</TText>

<TText inverse>
  I am inversed
</TText>

注意: <Text> 只允许文本节点和嵌套的 <Text> 组件作为他的子元素。例如， <Box> 组件不能在 <Text> 组件中使用。

color

Type: string

改变文本颜色。

Temir在内部使用chalk，所以它的所有功能都是支持的。

<TBox flex-direction="column">
  <TText color="green">
    Green
  </TText>
  <TText color="blue">
    Blue
  </TText>
  <TText color="red">
    Red
  </TText>
</TBox>

backgroundColor

Type: string

与上面的“颜色”相同，但用于背景。

<TBox flex-direction="column">
  <TText background-color="green">
    Green
  </TText>
  <TText background-color="blue">
    Blue
  </TText>
  <TText background-color="red">
    Red
  </TText>
</TBox>