头图

Use Vue.js to write command line interface, a tool for front-end development of CLI

foreword

Hello everyone, I'm webfansplz . After rendering Vue to the embedded LCD screen , today I want to share with you how to render Vue to command line tools:). About command line tools, everyone should be familiar with them, such as vue -cli, Vite, etc. When we write front-end applications for users, we usually pay a lot of attention to user experience. As developers, when we use tools, we will also pay great attention to the developer experience (DX) it gives us. Modern front-end Engineering is inseparable from the development and use of CLI, so is there a lower-cost solution that allows front-end partners to quickly develop CLI, and everyone can do it just like writing front-end applications. Therefore, Temir came into being.

Temir

introduce

Temir , a tool for writing command line interface applications with Vue components. Developers only need to use Vue to write command line applications without any additional learning costs.

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

components

Temir provides some basic components to help developers write and extend command line tools:

Text component (Text)

The text component can display text, changing its style to bold, underline, italics, or strikethrough.

 <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 component

<Box> is an essential Temir component for building layouts. Just like in browsers <div style='display: flex'>. It provides some common properties for building layouts, such as size, margins, alignment, etc. .

 <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 component (Newline)

Add one or more newlines (\n). Must be used in <Text> component.

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

Filler component (Spacer)

A flexible space that unfolds along its main axis containing the layout. It is very useful as a shortcut to fill all available space between elements.

For example, using <Spacer> <Box> in ---d344d91ce113710327e31ccdfee84221--- with the default stretch direction ( row ) will position "Left" to the left and push "Right" to the right .

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

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

Hyperlink component (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>

Loading component (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 Page Component (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>

select components

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

Install

 npm install @temir/core

use

 <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 support

We mentioned the developer experience (DX) earlier. In the current front-end engineering, HMR is very helpful and effective for developers. There is no reason why Temir does not own such a fragrant thing.

out of the box

Using Temir to customize the CLI is very simple, we provide @temir/cli to help you quickly build a Temir -based 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

You can get started quickly by downloading this example , or you can open the repl.it sandbox to experience and try it out online.

demo

Hi Temir

Borders

Table

Vitest

accomplish

  • createRenderer

The implementation of Temir mainly benefits from the excellent cross-platform capabilities of Vue3. We can create a custom renderer through the createRenderer API, create the corresponding Node and Element in the host environment, and add, delete, modify and check the elements.

  • Yoga

Vue provides an interface to run on the command line interface, so we still lack a layout engine to put Vue
Runs the command line tool. Temir uses Yoga, a Flexbox layout engine. Use the same CSS-like properties you've used when building browser apps to build great user interfaces for your CLI.

Thanks

  • This project was inspired by ink
  • vite-node provides strong support for implementing HMR

Epilogue

The article ends here, if my articles and projects are inspiring and helpful to you, please give a star to support the author✌

总是有人要赢的,那为什么不能是我呢

4.8k 声望
3.6k 粉丝
0 条评论
推荐阅读
「 2022-年度总结 」我的Vue.js生态开源之旅
大家好,转眼又到一年的尾巴了。好久没写文章了,因为今年工作之余更多的是活跃在开源社区,借着年底思考怀疑人生(偷懒)的空闲时间想跟大家分享今年我在Vue.js生态的做的事情和对开源的看法,也算是「2021」我给V...

null仔3阅读 1k

封面图
从零搭建 Node.js 企业级 Web 服务器(零):静态服务
过去 5 年,我前后在菜鸟网络和蚂蚁金服做开发工作,一方面支撑业务团队开发各类业务系统,另一方面在自己的技术团队做基础技术建设。期间借着 Node.js 的锋芒做了不少 Web 系统,有的至今生气蓬勃、有的早已夭折...

乌柏木140阅读 11.8k评论 10

从零搭建 Node.js 企业级 Web 服务器(十五):总结与展望
总结截止到本章 “从零搭建 Node.js 企业级 Web 服务器” 主题共计 16 章内容就更新完毕了,回顾第零章曾写道:搭建一个 Node.js 企业级 Web 服务器并非难事,只是必须做好几个关键事项这几件必须做好的关键事项就...

乌柏木60阅读 5.9k评论 16

再也不学AJAX了!(二)使用AJAX ① XMLHttpRequest
「再也不学 AJAX 了」是一个以 AJAX 为主题的系列文章,希望读者通过阅读本系列文章,能够对 AJAX 技术有更加深入的认识和理解,从此能够再也不用专门学习 AJAX。本篇文章为该系列的第二篇,最近更新于 2023 年 1...

libinfs39阅读 6.1k评论 12

封面图
从零搭建 Node.js 企业级 Web 服务器(一):接口与分层
分层规范从本章起,正式进入企业级 Web 服务器核心内容。通常,一块完整的业务逻辑是由视图层、控制层、服务层、模型层共同定义与实现的,如下图:从上至下,抽象层次逐渐加深。从下至上,业务细节逐渐清晰。视图...

乌柏木39阅读 7k评论 6

CSS 绘制一只思否猫
欢迎关注我的公众号:前端侦探练习 CSS 有一个比较有趣的方式,就是发挥想象,绘制各式各样的图案,比如来绘制一只思否猫?思否猫,SegmentFault 思否的吉祥物,是一只独一无二、特立独行、热爱自由的(&gt;^ω^&lt...

XboxYan41阅读 2.8k评论 14

封面图
还在用 JS 做节流吗?CSS 也可以防止按钮重复点击
举个例子:一个保存按钮,为了避免重复提交或者服务器考虑,往往需要对点击行为做一定的限制,比如只允许每300ms提交一次,这时候我想大部分同学都会到网上直接拷贝一段throttle函数,或者直接引用lodash工具库

XboxYan34阅读 2.2k评论 2

封面图

总是有人要赢的,那为什么不能是我呢

4.8k 声望
3.6k 粉丝
宣传栏