一、vite创建react项目 要使用Vite创建一个React项目,你需要按照以下步骤操作: 1、确保你已经安装了Node.js(建议使用最新的稳定版本)。 2、 使用npm命令安装Vite CLI工具,再来创建项目 代码语言:javascript 复制 npm create vite@latest my-vite-app 3、运行上述命令后,按照提示选择“create-react-app”模板创建项目。
一、初始化项目 yarn create vite// 初始化 (根据提示,确定项目名称、选择框架react、选择react还是react-ts ) cd项目名称// 进入项目根目录 yarn// 安装依赖包 yarn dev// 运行 注释:项目初始化后src中的目录很简单,自己可以按照自己的风格设置子目录结构,例如下面: 二、配置 打开根目录,参考vite官网,进行配置...
搭建一个使用Vite的React项目,可以按照以下步骤进行: 1. 安装或确认Node.js环境 首先,确保你的系统上已经安装了Node.js。你可以通过运行以下命令来检查Node.js是否已安装及其版本: bash node -v npm -v 如果未安装Node.js,请访问Node.js官网下载安装包并进行安装。 2. 使用npm或yarn全局安装Vite 接下来,你需...
但是,您可以通过在vite.config.js文件中添加特定选项来进一步优化构建输出,例如使用Terser或ESBuild压缩代码,或使用rollup-plugin-commonjs插件转换CommonJS模块。 优化代码分割 Vite通过将代码拆分为更小的块来优化性能,以允许更快的加载时间和更少的资源请求。您可以通过使用动态导入或异步组件来进一步优化代码分割。 配...
使用create-vite 脚手架生成基础模板 运行命令安装脚手架 yarncreatevite 我在安装时提供的命令行选项那里,选择了 React + TypeScript。 使用下面的命令启动项目 yarn dev 此时的项目已经默认集成了 @vitejs/plugin-react 这个插件。 到这一步其实就已经基本结束了,自动集成 HMR,jsx,ts,css module,资源打包等一系列...
简介:【8月更文挑战第13天】使用vite搭建一个React项目!真香! 环境配置 前端的一些大型项目都使用脚手架开发,脚手架需要借助node环境。 终端输入node -v即可查看当前node版本。 如果电脑没有node环境,必须进行安装。 构建工具与脚手架 构建工具 前端的脚手架工具都会依赖底层的构建工具,构建工具运行才node.js环境里、...
Vite是一个基于浏览器原生ES imports的开发服务器,利用浏览器去解析 imports,在服务器端按需编译返回,相比webpack,完全省去了打包这个过程,所以编译起来非常迅速,也不会随着项目模块增多而变慢。关于Vite的详细介绍,网上已经有很多相关内容了,本次分享主要聚焦如何使用Vite搭建React+Antd工程。
使用Vite 初始化项目非常简单。首先,在命令行中执行以下命令: bash npm create vite@latest 该命令会提示你选择项目模板。为了搭建 React 和 TypeScript 的开发环境,可以选择 react-ts 模板。选择完毕后,Vite 会自动为你创建一个新的项目文件夹,并为你配置好 React 和 TypeScript 所需的依赖和配置文件。
本文主要记录整个项目的搭建过程。 脚手架 直接用vite官方文档提供的命令来初始化整个项目,框架选择 React ,加上 ts 类型提示。整个过程没有踩到坑,很顺畅。 组件库 组件库使用字节开源的arco-design。原因是以前一直用的arco-desigin,对它比较熟悉 (提过PR),而且 oncall 也能及时响应。