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