建站
咨詢
售后
建站咨詢
新聞中心
前言
大家好,我是webfansplz[1].繼將 Vue 渲染到嵌入式液晶屏[2]后,今天要跟大家分享的是如何將Vue渲染到命令行工具 :).關(guān)于命令行工具,大家應(yīng)該都比較熟悉了,比如vue-cli、Vite等.我們在編寫前端應(yīng)用面向用戶時,通常會非常關(guān)注用戶體驗,作為開發(fā)者,我們在使用工具時,它給予我們的開發(fā)者體驗(DX)我們也會十分關(guān)注.團(tuán)隊在今年有自研腳手架的計劃,作為前端,我就在想是否能有較低成本的研發(fā)方案能讓團(tuán)隊的小伙伴參與進(jìn)來,大家可以像編寫前端應(yīng)用一樣搞定它.因此,Temir[3]應(yīng)運(yùn)而生.
專注于為中小企業(yè)提供成都網(wǎng)站設(shè)計、成都做網(wǎng)站服務(wù),電腦端+手機(jī)端+微信端的三站合一,更高效的管理,為中小企業(yè)西夏免費做網(wǎng)站提供優(yōu)質(zhì)的服務(wù)。我們立足成都，凝聚了一批互聯(lián)網(wǎng)行業(yè)人才，有力地推動了1000多家企業(yè)的穩(wěn)健成長，幫助中小企業(yè)通過網(wǎng)站建設(shè)實現(xiàn)規(guī)模擴(kuò)充和轉(zhuǎn)變。
Temir
介紹
Temir[4],一個用Vue組件來編寫命令行界面應(yīng)用的工具.開發(fā)者只需要使用Vue就可以編寫命令行應(yīng)用,不需要任何額外的學(xué)習(xí)成本.
{{ counter }} tests passed
復(fù)制代碼
組件
Temir[5]提供了一些基礎(chǔ)組件幫助開發(fā)者編寫與擴(kuò)展命令行工具:
文本組件 (Text)
文本組件可以顯示文本,將其樣式更改為粗體、下劃線、斜體或刪除線.
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
復(fù)制代碼
盒子組件 (Box)
添加一個或多個換行符(\n)。 必須在 沿其包含布局的主軸展開的靈活空間。 作為填充元素之間所有可用空間的快捷方式，它非常有用。 例如，在具有默認(rèn)伸縮方向(row)的
前面我們提到了開發(fā)者體驗(DX),在現(xiàn)在的前端工程中,對開發(fā)者很有幫助且提效的就是HMR,這么香的東西Temir[6]沒有理由不擁有它,話不多說,直接展示: 使用Temir[7]定制化CLI非常簡單,我們提供了\@temir/cli[8]幫助你快速構(gòu)建一個基于Temir[9]的CLI. 你可以通過下載這個 例子[10] 來快速開始，你也可以打開 repl.it sandbox[11]來在線體驗和嘗試它。 Hi Temir[12] Borders[13] Table[14] Vitest[15]
Temir的實現(xiàn)主要得益于Vue3出色的跨平臺能力,我們可以通過createRenderer[16] API創(chuàng)建一個自定義渲染器,通過創(chuàng)建宿主環(huán)境中對應(yīng)的Node和Element,并對元素進(jìn)行增刪改查操作. Vue提供了跑在命令行界面的接口,那我們就還缺少一個布局引擎就能把Vue 跑在命令行工具了.Temir使用了Yoga,一款Flexbox布局引擎.使用你在構(gòu)建瀏覽器應(yīng)用時使用過的類似CSS的屬性，為你的CLI構(gòu)建出色的用戶界面。
文章到這里就結(jié)束了,如果我的文章和項目對你有所啟發(fā)和幫助,請給一個star[19]支持作者
// [X ]
// [ X ]
// [ X]
// [X Y]
// [ X Y ]
復(fù)制代碼換行組件 (Newline)
Hello
World
復(fù)制代碼填充組件 (Spacer)
復(fù)制代碼超鏈接組件 (Link)
width="20"
border-style="round"
justify-content="center"
>
Hi
Github
復(fù)制代碼加載中組件 (Spinner)
width="20"
border-style="round"
justify-content="center"
>
Loading
復(fù)制代碼標(biāo)簽頁組件 (Tab)
Selected Text :
{{ selectedText }}
{{ item }}
復(fù)制代碼選擇組件
復(fù)制代碼安裝
npm install @temir/core
復(fù)制代碼使用
{{ counter }} tests passed
復(fù)制代碼HMR支持
開箱即用
mkdir my-temir-cli
cd my-temir-cli
touch main.ts
npm install @temir/cl
# Dev (開發(fā))
temir main.ts
# Build (打包)
temir build main.ts
復(fù)制代碼演示
實現(xiàn)
致謝
結(jié)語
網(wǎng)頁題目：使用Vue.js編寫命令行界面,前端開發(fā)CLI的利器
地址分享：http://www.5511xx.com/article/cdjegss.html
