yarn vite脚手架 react+ts搭建项目

news2024/11/15 12:17:37

创建react

1、确保你已经安装了Node.js(建议使用最新的LTS版本)。

2、安装Yarn(如果尚未安装):

npm install -g yarn

3、创建新项目:

yarn create vite

根据提示安装 vite脚手架,如果已安装无提示信息
直接填写项目名称-选择搭建框架(React)
注意:Git Bash Here方向键选框架时,界面无反应,其实已经选中,多按了就重新创建,或者更换调试终端)在这里插入图片描述
选择语言类型:
在这里插入图片描述
项目创建完成,根据提示进行进一步操作:
在这里插入图片描述
yarn 安装依赖
yarn dev 启动项目

安装sass

先安装sass

yarn add sass

再安装 node-sass 和 sass-loader 作为开发依赖。(要有顺序)

yarn add node-sass sass-loader --dev

在这里插入图片描述
在src目录下创建一个新的文件夹styles,然后在该文件夹中创建一个文件App.scss
在这里插入图片描述

v
在这里插入图片描述
sass修改Vite颜色
在这里插入图片描述
在这里插入图片描述

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

人脸表情识别数据集分享(内含处理过的AffectNet等数据集)

前言: 人脸表情识别有三大主流数据集rafdb、affectnet、ferplus,之前跑rafdb精度挺正常的,但是另外两个数据集复现不出来精度,经过几个月的踩坑,我发现其实是数据集的原因。 我在官方找的AffectNet数据集有几十个G&…

SQL 高阶 (sql优化)

批量插入: sql 批量插入: INSERT INTO users(name, age) VALUES (Tom, 20), (Jerry, 22), (Bob, 19); -- 该方式 适合 500条以内。多线程插入批量插入,能够大幅提升插入速度。 经过测试:系统性能,8核16G 插入10w条数…

Leetcode 1108. IP地址无效化 C++实现

Leetcode 1108. IP 地址无效化 问题:给你一个有效的 IPv4 地址address,返回这个 IP 地址的无效化版本。 所谓无效化 IP 地址,其实就是用 "[.]" 代替了每个 "."。 方法1:对字符串挨个进行判断,如…

java程序优化

Java程序的性能优化是一个复杂但非常重要的过程,它涉及多个方面。首先,我们需要识别性能瓶颈的具体位置,这通常可以通过性能分析工具(如JProfiler, VisualVM等)来完成。以下是一些通用的优化策略: 代码层面…

进程的创建与使用(win32-API)

一、前言 进程可以被视作操作系统中运行程序的一个实例,是系统资源分配和调度的基本单位。每一个进程都拥有自己独立的地址空间、一组状态信息(如打开的文件、内存映射等),以及一个或多个线程来执行代码。进程之间的隔离性确保了…

飞睿智能家居人体微动感知雷达模组,宠物喂食器、LED灯控连续波雷达感应开关原理

在智能家居的浪潮中,飞睿智能人体微动感知雷达模组犹如一位“隐形守护者”,以其独特的连续波雷达感应开关原理,为我们带来更为智能、便捷的生活体验。今天,就让我们一起走进这一前沿科技,探索它是如何改变我们的生活。…

IOS 13 网络请求和Moya框架

允许HTTP请求 从iOS9开始,推荐使用HTTPS,如果使用的HTTP,默认情况下会出现如下错误: The resource could not be loaded because the App Transport Security policy requires the use of a secure connection. 这是因为iOS9引…

中俄联袂 助力前行 点燃希望——助残义诊在杭州邦尔骨科医院顺利举行

8月26日,由杭州市残疾人联合会主办、临平区残疾人联合会承办,杭州市邦尔骨科医院协办的“中俄联袂 助力前行 点燃希望”助残义诊活动在该院1号楼门诊大厅顺利进行。此次活动得到了俄罗斯伊里扎洛夫中心医院和杭州市邦尔骨科医院专家的大力支持。 本次义诊…

珈创生物业绩下滑:毛利率连年大降,产能利用率滑坡仍募资扩产

《港湾商业观察》廖紫雯 日前,武汉珈创生物技术股份有限公司(以下简称:珈创生物)于北交所证券交易中心披露招股书,保荐机构为国投证券。 珈创生物往年IPO进程可谓一波三折。2020年12月,公司曾申报沪交所科…

双向NAT应用场景和配置

域内双向NAT(端口回流) 局域网内有一台或多台服务器可能需要对外映射提供服务,如内网终端也需要访问,这时如终端通过映射后的公网地址访问会出现无法访问的情况,这时就需要域内双向NAT(华三很多路由器会有…

window下kafka3启动多个

准备工作 我们先安装好kafka,并保证启动成功,可参考文章Windows下安装Kafka3-CSDN博客 复制kafka安装文件 kafka3已经内置了zookeeper,所以直接复制就行了 修改zookeeper配置文件 这里我们修改zookeeper配置文件,主要是快照地址…

学习分享:手把手教你使用Python开发一个api数据接口

今天想和大家分享一下Python开发语言,为什么选择Python,因为当今生活中人工智能无处不在,而开发人工智能的首选语言必是Python。今天教大家使用Python开发一个api接口。 Python的开发环境我使用的是PyCharm,安装完成之后创建项目…

单域名SSL证书快速获取指南

在当今互联网的社会,网站安全变得非常重要。SSL证书,作为实现网站HTTPS加密通信的重要手段,不仅能够保护用户数据传输的安全,还能提升网站的信任度和搜索引擎排名等。其中单域名SSL证书是可以保护单个域名的网站,这对于…

TensorBoard快速入门

一、简介 TensorBoard是一套 Web 应用程序,用于检查和了解 TensorFlow 运行和图形。简而言之,就是用于机器学习可视化的工具 TensorBoard 设计为完全离线运行,无需任何 Internet 访问权限。例如,这可能位于本地计算机上、公司防…

团队合作新风向:2024年8款协作工具榜单

文章介绍了以下几个团队协作工具:1. Worktile;2. PingCode;3. 飞书;4. 钉钉;5. Wrike;6. 云之家;7. Tapd;8. Slack。 在2024年,随着远程工作和分布式团队的普及&#xff…

从消费市场看电动汽车和充电桩互动关系

中国电动汽车充电基础设施促进联盟(以下简称促进联盟)日前发布的最新统计数据显示,7月全国新增公共充电桩8.8万台,同比增长45.2%,连续多月保持同比四成以上增长;今年前7个月全国充电基础设施增量为200.8万台…

MATLAB绘图基础1:MATLAB基础回顾

参考书:《 M A T L A B {\rm MATLAB} MATLAB与学术图表绘制》(关东升)。 1.MATLAB基础回顾 1.1 MATLAB语言特点 M A T L A B {\rm MATLAB} MATLAB是一种解释型语言,允许用户逐步执行命令并立即查看结果; M A T L A B {\rm MATLAB} MATLAB拥有…

1996-2022年各省农村用电量数据(无缺失)

1996-2022年各省农村用电量数据(无缺失) 1、时间:1996-2022年 2、来源:国家统计局、农村统计年鉴、电力企业联合会 3、指标:农村用电量 4、范围:31省 5、缺失情况:无缺失 6、指标说明&…

SAP与生产制造MPM系统集成案例

一、需求介绍 某公司为保证企业内部生产管理系统的多项基础数据的同步更新,确保各模块间信息的一致性和准确性,对后续的生产计划和物料管理打下基础,该公司将MPM系统和SAP系统经过SAP PO中间件集成平台进行了集成。MPM全称为Manufacturing…

面临快开学的孩子们,快看看莱莉是怎么利用数字时钟调整作息时间的吧!

网管小贾 / sysadm.cc “是谁订的西兰花匹萨?” “快吃我吧,我是有机的!” 哦,糟糕!莱莉昨晚又做恶梦了…… “不知道为什么,这几天总是翻来覆去的,莱莉看样子似乎不太走运!” 厌…