一、vite创建react项目 要使用Vite创建一个React项目,你需要按照以下步骤操作: 1、确保你已经安装了Node.js(建议使用最新的稳定版本)。 2、 使用npm命令安装Vite CLI工具,再来创建项目 代码语言:javascript 复制 npm create vite@latest my-vite-app 3、运行上述命令后,按照提示选择“create-react-app”模板创建项目。
(1) 安装路由包:yarn add react-router-dom@6 (2) 项目入口文件不变 (3) 嵌套路由中父组件需要使用Outlet(当然路由也可以平铺) import { Routes, Route, Navigate, Outlet } from 'react-router-dom'; 注释:以上的outlet组件只是一个插座,并不能独立显示父组件内容;以下可以解决这个问题: 四、接口统一配置 ...
搭建一个使用Vite的React项目,可以按照以下步骤进行: 1. 安装或确认Node.js环境 首先,确保你的系统上已经安装了Node.js。你可以通过运行以下命令来检查Node.js是否已安装及其版本: bash node -v npm -v 如果未安装Node.js,请访问Node.js官网下载安装包并进行安装。 2. 使用npm或yarn全局安装Vite 接下来,你需...
打包后,项目的主入口文件,也是react根节点挂载的文件。 package.json 项目的依赖配置文件,所有安装的依赖都会在这里提现,一些仓库的配置也在这里读取。 package-lock.json 项目依赖锁定文件。防止依赖自动升级,导致项目无法启动 tsconfig.json 项目的ts配置文件,针对src下面的所有ts文件生效。 tsconfig.node.json 项目的...
vanilla:原生js,没有任何框架集成 vue:vue3框架,只支持vue3 react:react框架 preact:轻量化react框架 lit-element:轻量级web组件 svelte:svelte框架3. 选择不同这里我们选择:react4. 项目创建完成5. 项目结构项目结构非常简单:6. 启动项目进入项目:cd vite-react 安装依赖:npm install 运行项目:npm run dev 或...
由于我之前学过React框架,但是由于工作中没有使用它,所以我最近开始使用了Vite、TypeScript、React Router,Redux,Axios,Ant Design和SpringBoot等流行技术来搭建了一个博客项目来巩固我的学习成果。这个项目包括了博客文章列表、文章详情、标签分类、搜索功能等常用功能。通过这个项目,我将分享如何使用Vite、TypeScript、Rea...
1、创建基本模板项目 npm init vite@latest yarn create vite // 根据提示选择配置即可 vite 提供的选项很少,只有 react 或 react + ts 2、配置环境变量 vite 提供了开发模式和生产模式 这里我们可以建立 4 个.env文件,一个通用配置和三种环境:开发、测试、生产。
preact // 基于 Preact(一款精简版的类 React 框架) lit // 基于 lit(一款 Web Components 框架) svelte // 基于 Svelte 此处,我们选择构建的框架为React。接着,执行如下命令在启动本地项目: cd vite-project npm install npm run dev 安装完成之后,去浏览器中打开http://localhost:5173/页面就可以看到示例...
要使用Vite构建React项目,可以按照以下步骤操作: 1. 首先,确保已经安装了Node.js。可以在终端中运行以下命令来检查是否已安装: ``` node -v ``` 如果已经安装了Node.js,则会显示其版本号。 2. 在终端中,使用以下命令全局安装Vite: ``` npm install -g create-vite ``` 3. 创建一个新的React项目,运行...
一、创建项目 首先参考 Vite 的文档创建一个项目 yarn create vite my-packages --template react-ts // 这里的 my-packages 是项目名称,按需修改 生成的项目如下: 结构很简单,但对于一个组件库来说,还需要完善 首先是 package.json, 需要将 dependencies 中的基础库移到peerDependencies和 devDependencies 中: ...