【Ty CLI】一个开箱即用的前端脚手架

在这里插入图片描述


目录

  • 资源链接
  • 基础命令
  • 模板创建
    • 命令帮助
    • 选择模板
    • 开始创建
    • 开发模板
  • 开发背景
  • npm 发布流程
  • 问题记录
    • 模板创建超时
  • 更新日志


资源链接

文档:https://ty.cli.vrteam.top/
源码:https://github.com/bosombaby/ty-cli

基础命令

1. npm 全局安装
npm i ty-cli-market -g

2. 快捷键 ty/ty-cli

3. 帮助命令 ty -h
Usage: ty-cli <command> [options]

A simple CLI tool for string manipulation

Options:
-V, --version                    output the version number
-h, --help                       display help for command

Commands:
create [options] <project-name>  create a new project
help [command]                   display help for command

Run 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
  • 模板定制化选择,维度包括:语言版本、组件库、功能细分
  • 后台管理系统模板优化开发

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/789744.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

开发个人Go-ChatGPT--6 OpenUI

开发个人Go-ChatGPT–6 OpenUI Open-webui Open WebUI 是一种可扩展、功能丰富且用户友好的自托管 WebUI&#xff0c;旨在完全离线运行。它支持各种 LLM 运行器&#xff0c;包括 Ollama 和 OpenAI 兼容的 API。 功能 由于总所周知的原由&#xff0c;OpenAI 的接口需要密钥才…

NAS免费用,鲁大师 AiNAS正式发布,「专业版」年卡仅需264元

7月10日&#xff0c;鲁大师召开新品发布会&#xff0c;正式发布旗下以“提供本地Ai部署和使用能力以及在线NAS功能”并行的复合软件产品&#xff1a;鲁大师 AiNAS。 全新的鲁大师 AiNAS将持续满足现如今大众对于数字化生活的全新需求&#xff0c;将“云存储”的便捷与NAS的大容…

html5——表单

目录 表单基本结构 表单标签 常用表单元素 文本框 密码框 邮箱 单选按钮 复选框 文件域 隐藏域 列表框 多行文本域 lable标签 表单按钮 常用表单属性 只读与禁用 placeholder required pattern autofocus autocomplete 用于指定表单是否有自动完…

软件架构之系统分析与设计方法(2)

软件架构之系统分析与设计方法(2&#xff09; 8.4 面向对象的分析与设计8.4.1 面向对象的基本概念8.4.2 面向对象分析8.4.3 统一建模语言 8.5 用户界面设计8.5.1 用户界面设计的原则8.5.2 用户界面设计过程 8.6 工作流设计8.6.1 工作流设计概述8.6.2 工作流管理系统 8.7 简单分…

vue3 ts 报错:无法找到模块“../views/index/Home.vue”的声明文件

解决办法&#xff1a; env.d.ts 新增代码片段&#xff1a; declare module "*.vue" {import type { DefineComponent } from "vue";// eslint-disable-next-line typescript-eslint/no-explicit-any, typescript-eslint/ban-typesconst component: Define…

STM32基础篇:中断编程 × NVIC ×

中断的概念 什么是中断 中断&#xff1a;正在进行的事务被突发事件打断&#xff0c;转而处理这个突发事件&#xff0c;突发事件处理完成后回到被打断的事务继续执行&#xff0c;这一处理突发事件的过程叫做中断。 对于STM32&#xff0c;由于中断源的触发&#xff0c;常规程序…

人工智能技术如何让中风瘫痪妇女重新获得声音,更自然地更高效地与人交流?

加州大学旧金山分校和伯克利分校的研究人员开发了一种创新的脑机接口&#xff08;BCI&#xff09;技术&#xff0c;使一位因中风而失去说话能力的女士Ann通过数字分身恢复了交流能力。这项技术首次实现了从大脑信号中合成语音和面部表情。 Ann在30岁时因脑干中风导致全身瘫痪&…

前端面试题35(在iOS和Android平台上,实现WebSocket协议有哪些常见的库或框架?)

在iOS和Android平台上&#xff0c;实现WebSocket协议有许多成熟且被广泛使用的库和框架。下面是一些推荐的选项&#xff1a; iOS 平台 SocketRocket 简介&#xff1a;这是由Facebook开源的库&#xff0c;专门为iOS和Mac OS X设计&#xff0c;提供WebSocket连接的功能。它基于S…

【CUDA】 Trust基本特性介绍及性能分析

Trust简介 Thrust 是一个实现了众多基本并行算法的 C 模板库,类似于 C 的标准模板库(standard template library, STL)。该库自动包含在 CUDA 工具箱中。这是一个模板库,仅仅由一些头文件组成。在使用该库的某个功能时,包含需要的头文件即可。该库中的所有类型与函数都在命名空…

神经网络设计过程

1.可根据Iris特征直接判断 2.神经网络方法&#xff0c;采集大量的Iris特征&#xff0c;分类对应标签&#xff0c;构成数据集。 将数据集喂入搭好的神经网络结构&#xff0c;网络通过反向传播优化参数得到模型。 有新的网络送入到模型里&#xff0c;模型会给出识别结果。 3.…

实验02 黑盒测试(组合测试、场景法)

1. 组合测试用例设计技术 指出等价类划分法和边界值分析法通常假设输入变量相互独立&#xff0c;但实际情况中变量间可能存在关联。全面测试&#xff1a;覆盖所有输入变量的所有可能组合&#xff0c;测试用例数量随输入变量的增加而指数增长。 全面测试需要对所有输入的各个取…

Vue 项目中 history 路由模式的使用

在最近帮客户开发的一个项目中&#xff0c;由于项目的特殊性&#xff0c;需要用到 Vue 中的 history路由模式。该模式使用时会涉及到“上传白屏”和“刷新 404 问题”。在帮助客户解决这两个问题的过程中&#xff0c;总结问题的解决方案并记录下来&#xff0c;希望能够保留这篇…

开始尝试从0写一个项目--前端(二)

修改请求路径的位置 将后续以及之前的所有请求全都放在同一个文件夹里面 定义axios全局拦截器 为了后端每次请求都需要向后端传递jwt令牌检验 ps&#xff1a;愁死了&#xff0c;翻阅各种资料&#xff0c;可算是搞定了&#xff0c;哭死~~ src\utils\request.js import axio…

数据结构--二叉树相关性质

1.性质 1.满二叉树每层节点个数&#xff1a;等比数列 3.&#xff08;重要&#xff09;任意二叉树&#xff1a;度为0&#xff08;叶子节点&#xff09;的比度为2的永远多一个。。度&#xff1a;就是看有多少孩子 如下图解析&#xff1a;&#xff08;用推到归纳来分析&#xff…

Code2prompt:探索高效代码编辑新纪元的开源模型工具

项目介绍 Code2prompt 是一个命令行工具&#xff0c;能将你的代码库转化为单一的大型语言模型&#xff08;LLM&#xff09;提示&#xff0c;结合源码树结构&#xff0c;模板定制&#xff0c;以及令牌计数。它旨在简化与高级上下文窗口模型如GPT或Claude的交互&#xff0c;助你…

华为浏览器,Chrome的平替,插件无缝连接

文章目录 背景插件书签 背景 不知道各位小伙伴有没有这样的痛点&#xff0c;办公电脑、家里的电脑还有手机、平板等&#xff0c;收藏了一个网址或者在手机上浏览了某个网页&#xff0c;保存起来&#xff0c;可是一换平台或者换个电脑&#xff0c;在想要浏览之前收藏的东西&…

【linux】 sudo apt update报错——‘由于没有公钥,无法验证下列签名: NO_PUBKEY 3B4FE6ACC0B21F32’

【linux】 sudo apt update报错——‘由于没有公钥&#xff0c;无法验证下列签名&#xff1a; NO_PUBKEY 3B4FE6ACC0B21F32’ 在运行sudo apt update时遇到报错&#xff0c;由于没有公钥&#xff0c;无法验证下列签名&#xff1a; NO_PUBKEY 3B4FE6ACC0B21F32 解决方法&#x…

299k stars利用Public APIs提升开发效率:探索APILayer提供的开源资源

299k stars利用Public APIs提升开发效率&#xff1a;探索APILayer提供的开源资源 在现代软件开发中&#xff0c;API&#xff08;应用程序接口&#xff09;是实现应用间通信和功能扩展的关键工具。公共API&#xff08;Public APIs&#xff09;则为开发者提供了宝贵的资源&#…

passwd文件被删导致无法进入系统问题处理

系统&#xff1a;centos7 问题背景&#xff1a;根据描述&#xff0c;之前有人搞破坏&#xff0c;导致无法进入系统。启动界面显示各种服务无法启动。 进单用户模式 重启启动&#xff0c;在内核选择界面按e,在linux16 行,将ro 修改为rw&#xff0c;在行末添加 init/bin/bash ,按…

【C语言】【排序算法】----- 归并排序

由于最近要考试&#xff0c;好久没有发博客了&#xff0c;非常抱歉大家对我的支持。之后我会不断更新博客&#xff0c;继续创作出高质量的文章&#xff0c;希望能帮到大家&#xff01; 文章目录 一、归并排序基本思想二、递归实现三、非递归实现四、效率分析 一、归并排序基本…