使用vite创建react

原创 已于 2023-07-03 19:21:36 修改 · 587 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#react.js #前端 #前端框架

于 2023-06-28 14:39:12 首次发布
本文介绍了如何使用Vite构建React项目，首先通过`cnpmivitecreate-vite`安装Vite，然后选择React模板初始化项目。接着在项目根目录安装所需依赖，如`npmi`或`yarninstall`。最后，运行`npmrundev`启动开发服务器，完成项目设置。

1, 安装vite构建工具
    cnpm i vite create-vite -g
2, 使用vite构建项目, 选择react
    npm init vite
3, 切换到项目根目录, 安装依赖包
    cnpm i   /  npm i   /  yarn install
4, 运行,启动vite项目
    npm run dev

【React】Vite创建React+TS项目
owo_ovo的博客
03-15 6909
【React】Vite创建React+TS项目
快速上手Vite创建React项目
最新发布
没有撤退可言.
09-12 999
摘要：本文详细介绍了如何使用Vite快速创建React项目。首先确保Node.js 18+环境，通过npm create vite@latest命令启动项目初始化，交互式选择React框架和JavaScript/TypeScript变体。完成创建后，依次执行cd项目目录、npm install安装依赖，最后npm run dev启动开发服务器访问本地页面。Vite提供极速的开发体验，支持主流框架和TypeScript，适合快速搭建现代前端项目。
React实战-Vite搭建React项目
lmryBC49的博客
03-03 1192
从2025年开始，CRA正式被废弃，React生产环境中更推荐使用ViteRemixNext。本章节主要就Vite搭建React项目进行讲解。
使用Vite搭建React项目
2201_75657283的博客
02-27 2876
选项就是选react，react-ts，一个是加ts的（react版本为18.0.0）
利用 Vite 快速构建 React 组件
codingpy的博客
02-22 2014
你好，我是坚持分享干货的 EarlGrey，翻译出版过《Python编程无师自通》、《Python并行计算手册》等技术书籍。如果我的分享对你有帮助，请关注我，一起向上进击。本文为编译文章，原文地址见文末。ReactReact 是一个免费开源的前端 JavaScript 库，用于构建基于组件的用户界面。它由 Meta 以及由个人开发者和公司组成的社区负责维护。React 可用于开发单页面、移动或服务...
使用Vite创建React + TypeScript（pro和mobile，含完整的空项目结构资源可供下载）
12-27
在本文中，我们将深入探讨如何使用Vite搭建一个React + TypeScript项目，并且涵盖Pro和Mobile两种版本。Vite是由Vue.js作者尤雨溪开发的一款现代Web应用构建工具，它提供了快速的热重载、按需编译以及优化的开发体验...
使用vite创建react-route代码
08-15
使用vite创建react-route代码
【React框架】什么是 Vite？如何使用vite自动生成react的目录？
weixin_44174312的博客
04-12 1547
Vite是一个基于原生 ES Modules 开发的前端构建工具，由 Evan You（Vue 的作者）开发。极速冷启动：因为利用了浏览器原生的 ES Modules，所以在开发时无需等待整个打包过程。高效热更新（HMR）：文件变更后只更新改动部分，极大提升开发效率。简单配置：大部分项目即开箱即用，同时也支持灵活的配置和插件扩展。在文件中，你可以进行各种自定义配置。resolve: {alias: {'@': '/src', // 使用 @ 表示 src 目录},},server: {
用vite创建React项目
weixin_45573779的博客
02-16 1418
用vite创建React项目
Vite创建React项目
猫老板的豆
09-16 5513
文章目录1. 输入项目名称2. 选择框架3. 选择不同4. 项目创建完成5. 项目结构6. 启动项目 Vite 需要 Node.js 版本 >= 12.0.0。（node -v 查看自己当前的node版本） 使用 yarn：yarn create @vitejs/app 使用 npm：npm init @vitejs/app 1. 输入项目名称 这里输入我们的项目名称：vite-react 2. 选择框架 这里选择我们需要集成的框架：react vanilla：原生js，没有任何框架集
使用 vite工具构建react项目
weixin_73219516的博客
07-02 650
2, 使用vite构建项目, 选择react。3, 切换到项目根目录, 安装依赖包。4, 运行,启动vite项目。1, 安装vite构建工具。
vite创建React项目 react从零入门
ICUiseeyou的博客
05-04 8484
react vite css react-router-dom 路由
使用vite搭建react项目
deng_zhihao692817的专栏
12-11 1516
向tsconfig.app.json 和 tsconfig.node.json文件 增加以下代码应该解决报红线问题。6. npm install命令安装过慢，改使用cnpm install安装，然后运行命令npm run dev。10. 把多余的css文件删除， 新建几个文件夹，跟vue项目差不多。1. 使用nvm管理node版本， 切换到最新的node版本。router文件夹新建路由文件router.tsx。然后在vite.config.ts配置文件写入。8. 安装css库，windcss库。
使用 Vite 来创建 React 项目
u011091936的博客
07-25 1245
使用 Vite 来创建 React 项目是目前非常流行且高效的方式。它的开发体验（特别是启动速度和热更新速度）比 create-react-app 快很多。下面我为你提供一个，包括每一步的解释和后续操作。
用Vite从零到一创建React+ts项目
weixin_45822952的博客
09-18 2275
这里可以自行选择适合自己的框架类似于antd、Material UI...等。ps:如果失败的话尝试（1：使用管理员身份执行命令（2：切换镜像重试。在vite.config.ts 引入path加上下面的代码片段。同时在tsconfig.json 让IDE能识别这个别名。然后在router文件夹下创建index.tsx文件。这里我选的是移动端Material UI 官方文档。然后在vite.config.ts中进行相关配置。接下来就是一些配置、路由、网络封装什么的。选择自己想要的一些框架和配置。
使用vite创建react项目
qq_70005974的博客
09-30 632
my-react-app是你的项目名称你可以自己修改。选择react就可以，当然vue也是可以的哈。，可以通过 npm 或 Yarn 来安装它。选择过后就会让你选择是否使用ts还是js。如果你还没有全局安装。这样你的项目就创建好了。
从0到1使用vite搭建react项目保姆级教程（持续更新中）
热门推荐
风中追风
06-19 2万+
要使用Vite创建一个React项目，你需要按照以下步骤操作：1、确保你已经安装了Node.js（建议使用最新的稳定版本）。2、 使用npm命令安装Vite CLI工具，再来创建项目3、运行上述命令后，按照提示选择“create-react-app”模板创建项目。4、输入项目名称，例如“my-react-app”。5、选择需要的选项，例如选择JavaScript或TypeScript作为项目的编程语言。
vite搭建react，集成less，配置alias别名，配置proxy跨域，vite环境变量和模式，使用react-router-dom路由，状态管理Redux，配置Ant Design样式库
时光从指尖划过的博客
03-04 3005
使用vite搭建react项目，集成less，配置 alias 别名，配置 proxy 跨域，vite环境变量和模式，使用 react-router-dom 路由，状态管理Redux，配置 Ant Design 样式库
0101-vite创建react_ts-环境准备-仿低代码平台项目
gaogzhen的博客
03-29 1375
0101-vite创建react_ts-环境准备-仿低代码平台项目
评论 1
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值