vite+react+ts创建一个项目

最新推荐文章于 2025-09-02 11:25:47 发布
原创 最新推荐文章于 2025-09-02 11:25:47 发布 · 379 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#javascript #react

在VSCode终端中，使用npm命令创建了一个最新的Vite项目，并指定了模板为react-ts。按照提示完成项目初始化，准备开始开发TypeScript驱动的React应用。

在vscode终端输入
npm create vite@latest my-app -- --template react-ts
最后按提示选择

【React】Vite创建React+TS项目
owo_ovo的博客
03-15 6853
【React】Vite创建React+TS项目
Vite 创建 React + TS 项目（完整）
m0_54158068的博客
02-25 1513
Vite 创建 React + TS 项目（完整）
1.创建一个 React 应用
最新发布
ztllearn的博客
09-02 723
下载。
vite + react + ts 手摸手做项目系列一 （项目配置篇）
Web面试那些事儿的博客
01-11 1991
说好的教程终于来了，文章主要带大家打造一个 react spa 的项目，使用的技术栈是 vite+react+ts,vite 的快想必我就不用介绍了，用过的都说好， react + ts 已经成为大型项目的主流，大厂极为青睐，所以学好 react + ts 对你之后想进大厂应该会如虎添翼，本项目会有严格的规范性，eslint 规范，stylelint 规范，ts 类型规范，git 提交规范，包括打包上线体积分析，性能分析，以及何如做项目的想能优化。
Vite搭建react+ts项目
YYTX_YS的博客
05-26 1035
vite搭建react项目并配置ts环境
用Vite从零到一创建React+ts项目
weixin_45822952的博客
09-18 2216
这里可以自行选择适合自己的框架类似于antd、Material UI...等。ps:如果失败的话尝试（1：使用管理员身份执行命令（2：切换镜像重试。在vite.config.ts 引入path加上下面的代码片段。同时在tsconfig.json 让IDE能识别这个别名。然后在router文件夹下创建index.tsx文件。这里我选的是移动端Material UI 官方文档。然后在vite.config.ts中进行相关配置。接下来就是一些配置、路由、网络封装什么的。选择自己想要的一些框架和配置。
react PC端项目构建TS，react@18.2.0+antd+vite+axios+redux+sass+ts
03-07
该架构已解决大部分坑，主要用于react@18.2.0PC端，在使用项目前请确保已安装node、yarn工具，node版本18+，此项目构建主要集成：axios、antd、sass、vite、sass、react V18，其中还会介绍到如何跨页面传递数据、...
使用vite+react+ts+Ant Design开发后台管理项目（一）
lbking666666的专栏
09-19 3015
本文将引导开发者从零基础开始，运用。
手把手教你用vite+React18+TS+redux+prettier+eslint+Ant打造企业级前端项目
zayyo的博客
08-25 1758
通过这篇文章你可以学到。
vite+react+ts+scss 创建项目
初遇你时动了情
04-10 1035
WC 通过利用 Rust 编写的编译器，使用了更先进的优化技术，使得它在处理 TypeScript 代码时能够更快地进行转换和编译。特别是在大型项目中，SWC 相对于传统的 TypeScript 编译器有着更快的性能，特别是在启动项目和进行热模块更新时。
使用vite+react+ts+Ant Design开发后台管理项目（二）
lbking666666的专栏
09-20 1479
本文将引导开发者从零基础开始，运用、react、react-router、react-redux、Ant Design、less、tailwindcss、axios等前沿技术栈，构建一个高效、响应式的后台管理系统。通过详细的步骤和实践指导，文章旨在为开发者揭示如何利用这些技术工具，从项目构思到最终实现的全过程，提供清晰的开发思路和实用的技术应用技巧。使用vite+react+ts+Ant Design开发后台管理项目（一）
react-vite-ts
04-05
这是一个vite2＆React17＆Typescript演示 去做 集成Redux ，或者使用封装过的 约定式路由 还记得吗，在Vite中，如果想按需加载，可以使用这个插件： ，现在已经支持Vite 2了 less换成scss Production Mode ， SSR ，参照官网配置即可，遇到什么坑可以一起讨论
vite-react-zhihu:vite + react + typescript仿知乎
03-31
Vite React应用 这是一个Vite官方脚手架建造的React + TypeScript模版。
配置Vite+React+TS项目
ZF的博客
02-17 2023
自己去src里面创建router文件夹处理路由的信息，然后在。并填写项目名、用那个框架。
vite+react+ts+sass搭建项目
weixin_57337549的博客
03-05 7988
vite+React+ts+sass重0开始搭建项目
vite从零创建react-ts项目
Javon_huang的博客
02-14 2051
npm init初始化后可以看到包管理文件package.json。
学了两天react的我，用vite+react+ts搭建起了项目
Web面试那些事儿的博客
01-27 850
我们要学习或者使用react项目，那么搭建react是必修课，我根据网上查的资料整理以及针对一些场景进行了整理从而来搭建的这个项目，我相信绝对是最小白；也是最基础实用的搭建方法，我也看了很多人的搭建react项目，我个人感觉哈一个字乱；所以才写了这篇文章，希望能对刚学习react的同学们有用。
（一）React +Ts（vite创建项目/useState/Props/Interface）
weixin_42067536的博客
08-01 395
【代码】（一）React +Ts（vite创建项目）
搭建React项目，基于Vite+React+TS+ESLint+Prettier+Husky+Commitlint
zhanghuaiwei
12-05 2787
搭建React项目，基于Vite+React+TS+ESLint+Prettier+Husky+Commitlint
Vite + React + TS项目安装less
08-23
在 Vite + React + TypeScript 项目中安装和配置 Less，可以通过以下方式实现，确保项目支持 `.less` 文件的解析和使用。 ### 安装 Less 依赖 首先，需要安装 `less` 和 `vite-plugin-react` 或 `vite-plugin-react-swc` 插件所依赖的 `less-loader`，这些工具用于处理 `.less` 文件： ```bash npm install less less-loader --save-dev ``` 如果项目使用了 `vite-plugin-react-swc` 插件，它会自动处理 JSX 和 TypeScript，同时支持 Less 的解析[^2]。 ### 配置 Vite 项目支持 Less 在 `vite.config.ts` 文件中，确保 Vite 配置文件中包含对 Less 文件的支持。Vite 默认已经支持 `.less` 文件，但需要确认 `vite.config.ts` 中没有显式排除相关配置。 如果需要自定义 Less 配置，可以在 `vite.config.ts` 中添加如下内容： ```ts import { defineConfig } from 'vite'; import react from '@vitejs/plugin-react-swc'; export default defineConfig({ plugins: [react()], css: { preprocessorOptions: { less: { // 自定义 Less 变量或配置 modifyVars: { '@primary-color': '#1890ff', }, javascriptEnabled: true, }, }, }, }); ``` 上述配置启用了 `javascriptEnabled` 选项，这对于使用 Ant Design 等库时非常关键，因为它允许在 Less 文件中使用 JavaScript 表达式[^1]。 ### 使用 Less 文件 在项目中创建 `.less` 文件，并在组件中导入： ```ts import './App.less'; ``` 确保 `App.less` 文件中的样式能够正确应用到组件上。 ### 配置 Ant Design 主题（可选） 如果项目中使用了 `antd`，可以进一步配置 `less-loader` 以支持按需加载和主题覆盖。安装 `babel-plugin-import` 并在 `babel.config.js` 或 `package.json` 中添加以下配置： ```json { "plugins": [ [ "import", { "libraryName": "antd", "libraryDirectory": "es", "style": true } ] ] } ``` 然后在 `vite.config.ts` 中配置 `modifyVars` 来覆盖默认的 Ant Design 主题变量[^1]。 ### 测试 Less 支持 创建一个 `.less` 文件，例如 `App.less`，并在 `App.tsx` 中引入： ```ts import './App.less'; ``` 确保项目能够正常编译并应用样式。 ---
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值