【Ty CLI】一個開箱即用的前端腳手架

在這里插入圖片描述


目錄

  • 資源鏈接
  • 基礎命令
  • 模板創建
    • 命令幫助
    • 選擇模板
    • 開始創建
    • 開發模板
  • 開發背景
  • npm 發布流程
  • 問題記錄
    • 模板創建超時
  • 更新日志


資源鏈接

文檔:https://ty.cli.vrteam.top/
源碼:https://github.com/bosombaby/ty-cli

基礎命令

1. npm 全局安裝
npm i ty-cli-market -g2. 快捷鍵 ty/ty-cli3. 幫助命令 ty -h
Usage: ty-cli <command> [options]A simple CLI tool for string manipulationOptions:
-V, --version                    output the version number
-h, --help                       display help for commandCommands:
create [options] <project-name>  create a new project
help [command]                   display help for commandRun ty-cli <command> --help for detailed usage of given command.4. 版本查看 ty -V
1.1.0

模板創建

create 命令也就是腳手架的核心指令,用來選擇不同的執行模板并下載

  1. 配置命令的基本信息
  2. 解析后面的 options 響應參數
    1. 存在 force 參數,直接下載
    2. 不存在 force 參數,判斷是否有重名的模板,給用戶選擇是否覆蓋
      1. 退出本次操作
      2. 覆蓋當前文件
  3. 一步步確認模板的類型
  4. github 拉取項目信息
  5. 下載模板到本地
  6. yarn run build

命令幫助

5.png

選擇模板

6.png

開始創建

7.png

9.png

開發模板

10.png
當前是小程序的開發模板,具體模板使用說明可以查看相關文檔。

開發背景

目前團隊內部后臺管理系統過多,需求開發的頁面邏輯或者相關組件重復率過高,跨項目開發很容易遇到重復編寫大量代碼、不同項目的技術棧/版本不統一、相關樣式不統一等問題,迫切需要一款標準化、高擴展、簡單便捷的腳手架工具來協助開發。
該工具要求具備的核心能力如下:

  1. 命令行運行,多種配置可選,可自定義
  2. 配色方案、核心布局、組件、方法、hooks、http 請求封裝完備
  3. 設計高擴展性,同程內部的工具鏈路完備

npm 發布流程

1. 切換鏡像源到 npm 原生
npm config get registry
npm config set registry https://registry.npmjs.org/2. npm login 登錄(瀏覽器打開鏈接登錄)3. npm publih 發布(注意不要重名、登錄問題)4. 切換回到淘寶鏡像源
npm config set registry https://registry.npmmirror.com

這里注意發布 npm 需要先進行登錄,登錄發布時需要明確包名稱和版本號的唯一性。

問題記錄

模板創建超時

8.png
Git 客戶端無法在指定的時間內連接到 GitHub 服務器上的 443 端口

取消全局 Git 配置中設置的 HTTPS 代理服務器
git config --global --unset http.proxy
git config --global --unset https.proxy

更新日志

  1. 2024-6-30 V1.0.0 第一版上線
  2. 2024-7-1 后續 create 命令優化
  3. 2024-7-3 說明文檔 V1.0.1
  4. 2024-7-8 GitHub API 權限認證 V1.1.0
  5. 2024-7-9 https://ty.cli.vrteam.top/ 文檔完善
  • GitHub 會有網絡問題,后續整體遷移到 GitLab
  • 模板定制化選擇,維度包括:語言版本、組件庫、功能細分
  • 后臺管理系統模板優化開發

本文來自互聯網用戶投稿,該文觀點僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。
如若轉載,請注明出處:http://www.pswp.cn/diannao/43735.shtml
繁體地址,請注明出處:http://hk.pswp.cn/diannao/43735.shtml
英文地址,請注明出處:http://en.pswp.cn/diannao/43735.shtml

如若內容造成侵權/違法違規/事實不符,請聯系多彩編程網進行投訴反饋email:809451989@qq.com,一經查實,立即刪除!

相關文章

Zabbix Sia Zabbix 邏輯漏洞(CVE-2022-23134)

前言 CVE-2022-23134是一個中等嚴重度的漏洞&#xff0c;影響Zabbix Web前端。這個漏洞允許未經身份驗證的用戶訪問setup.php文件的某些步驟&#xff0c;這些步驟通常只對超級管理員開放。利用這個漏洞&#xff0c;攻擊者可以通過跳過某些步驟來重新配置Zabbix前端&#xff0c…

gazebo仿真環境中加入livox mid360

https://github.com/Livox-SDK/livox_laser_simulation 功能包適用于ubuntu18.04 gazebo9的可以直接編譯運行。在ubutun20.04 的系統下gazebo是11版本,需要做一些修改 CMakeLists.txt文件中的 add_compile_options(-std=c++11) 改為 add_compile_options(-std=c++17)fatal er…

二一、搭建自已的語言大模型

1. 配置langchain環境 使用conda創建一個虛擬環境,基于 Python3.10,并在虛擬環境內安裝項目的依賴。注意,大模型對gpu有一定的要求,否則速度會奇慢無比。 conda create -n langchain python=3.10 conda env list conda activate langchain # 拉取倉庫 $ git clone ht…

Redis-Jedis連接池\RedisTemplate\StringRedisTemplate

Redis-Jedis連接池\RedisTemplate\StringRedisTemplate 1. Jedis連接池1.1 通過工具類1.1.1 連接池&#xff1a;JedisConnectionFactory&#xff1a;1.1.2 test&#xff1a;&#xff08;代碼其實只有連接池那里改變了&#xff09; 2. SpringDataRedis&#xff08;lettuce&#…

終于弄明白了什么是EI!

EI是Engineering Index的縮寫&#xff0c;中文意為“工程索引”&#xff0c;是由美國工程信息公司(Engineering Information, Inc.)編輯出版的著名檢索工具。它始創于1884年&#xff0c;擁有超過一個世紀的歷史&#xff0c;是全球工程界最權威的文獻檢索系統之一。EI雖然名為“…

十五、小型電腦沒有數字鍵及insert,怎么解決IDEA快速插入getset構造這些方法

&#x1f33b;&#x1f33b;目錄 一、小型電腦沒有數字鍵及insert&#xff0c;怎么解決IDEA快速插入getset構造這些方法 一、小型電腦沒有數字鍵及insert&#xff0c;怎么解決IDEA快速插入getset構造這些方法 解決&#xff1a; 1.winR打開搜索 2.osk回車 屏幕就出現了這樣的一…

CC7利用鏈分析

分析版本 Commons Collections 3.2.1 JDK 8u65 環境配置參考JAVA安全初探(三):CC1鏈全分析 分析過程 CC7,6,5都是在CC1 LazyMap利用鏈(引用)的基礎上。 只是進入到LazyMap鏈的入口鏈不同。 CC7這個鏈有點繞&#xff0c;下面順著分析一下利用鏈。 入口類是Hashtable&…

前端入門知識分享:如何在HTML或CSS文件中引用CSS文件。

閱讀提示&#xff1a;本文僅僅僅適用于剛剛接觸HTML和CSS的小白從業者&#xff0c;新人愛好者。自覺身份不符的老鳥們&#xff0c;盡快繞行吧&#xff01; 什么是CSS&#xff1f;什么是CSS文件。 CSS&#xff0c;全稱為Cascading Style Sheets&#xff08;層疊樣式表&#xff…

分布式IO模塊軟件配置

組態接口模塊 1、打開網絡視圖 2、拖拽出ET200SP 3、雙擊ET200SP的圖片&#xff0c;進入從站配置 總線適配器的組態更換 關于IO地址分配&#xff0c;需要建立好子網通信后&#xff0c;在主機上配置。 可以看到IP 和設備名 設備與控制器的Profinet連接 先找到設備名稱再找…

HarmonyOS鴻蒙DevEco Studio無法連接本地模擬器

使用DevEcoStudio 5.0.3.403版本 發現無法選擇模擬器 解決方法&#xff1a; 1、打開模擬器 2、關閉DevEco Studio&#xff0c;&#xff08;不要關閉模擬器&#xff09; 3、重新打開DevEco Studio。

EXCEL VBA發郵件,實現自動化批量發送

EXCEL VBA發郵件&#xff0c;實現自動化批量發送 以GET方式上傳數據 Public Function uploadData_GET(ByVal url As String)Dim httpSet http CreateObject("Microsoft.XMLHTTP")http.Open "GET", url, Falsehttp.sendDebug.Print http.getAllResponseHea…

四道經典算法JAVA

1.爬樓地 爬20個臺階的爬法:f(19)f(18) 經典斐波拉契數列問題 public class demo4 {//爬樓梯問題public static void main(String[] args) {System.out.println(getSum(20));}public static int getSum(int n) {if (n 1)return 1;if (n 2)return 2;return getSum(n - 1) …

SpringBoot:SpringBoot中如何實現對Http接口進行監控

一、前言 Spring Boot Actuator是Spring Boot提供的一個模塊&#xff0c;用于監控和管理Spring Boot應用程序的運行時信息。它提供了一組監控端點&#xff08;endpoints&#xff09;&#xff0c;用于獲取應用程序的健康狀態、性能指標、配置信息等&#xff0c;并支持通過 HTTP …

jdk1.8 ConcurrentHashMap 源碼分析

ConcurrentHashMap 1.8 使用synchronized 和CAS 實現 記住&#xff1a;1.8沒有分段鎖不要混淆了&#xff0c;分段鎖是1.7中的 final V putVal(K key, V value, boolean onlyIfAbsent) {if (key null || value null) throw new NullPointerException();//計算hashint hash…

關于Python的類的一些理解

才發現python的類對象只能調用類方法 我想使用對類對象a使用系統調用的len方法就會報錯 2.類對象a是什么&#xff1f; 答&#xff1a;是所有的帶有self的成員變量 舉例說明&#xff1a;紅色的就是a里面的東西 class A:def __init__(self,data):self.datadataself.b1self.d{a…

發表EI會議論文-對考研生和研究生都有好處!

EI論文對考研和保研的幫助主要體現在以下幾個方面&#xff1a; 對考研的幫助 1.復試加分&#xff1a;在考研過程中&#xff0c;復試階段是關鍵&#xff0c;擁有EI論文可以證明考生具備一定的科研能力&#xff0c;給考官留下深刻印象&#xff0c;有助于提高復試通過率。 2.學…

解讀‘‘不要卷模型,要卷應用‘‘

前言 2024 年 7 月 4 日&#xff0c;世界人工智能大會暨人工智能全球治理高級別會議全體會議在上海世博中心舉行。百度創始人李彥宏在產業發展主論壇上發言&#xff0c;呼吁不要卷模型&#xff0c;要卷應用。 目錄 四個要點 積極的觀點 不合理性 總結 四個要點 李彥宏的呼吁…

多模態:Nougat詳解

文章目錄 前言一、模型結構1. encoder2. decoder3. set 二、數據增強三、數據splitting the pages 四、實驗評估repetitions during inference 五、代碼1. 環境安裝2. Dataset&#xff08;dataset.py&#xff09;3. Model&#xff08;model.py&#xff09; 總結 前言 科學知識…

一網統管/視頻匯聚/安防監控平臺EasyCVR啟動后無法訪問是什么原因?

智慧城市/一網統管/視頻匯聚/安防監控平臺EasyCVR兼容性強&#xff0c;支持多協議接入&#xff0c;包括國標GB/T 28181協議、GA/T 1400協議、部標JT808協議、RTMP、RTSP/Onvif協議、海康Ehome、海康SDK、大華SDK、華為SDK、宇視SDK、樂橙SDK、螢石云SDK等&#xff0c;并能對外分…

接口測試課程結構

課程大綱 如圖&#xff0c;接下來的階段課程&#xff0c;依次專項講解如下專題&#xff0c;能力級別為中級&#xff0c;進階后基本為中高級&#xff1a; 1.接口基礎知識&#xff1b; 2.抓包工具&#xff1b; 3.接口工具&#xff1b; 4.mock服務搭建&#xff08;數據模擬服務&am…