【react】创建react项目与文件配置

创建React与Vite项目及配置详解

原创已于 2023-05-17 11:34:23 修改 · 727 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#react.js #javascript #前端

于 2023-05-17 11:14:26 首次发布

本文介绍了如何使用npxcreate-react-app和npmcreatevite创建React和Vite项目，以及项目结构中的关键部分，如assets存放静态资源，components和pages管理组件和页面，router处理路由，store用于数据共享，而utils则涉及axios的封装以实现服务器通信。

一、创建react项目

1、react创建

在需要创建的文件终端命令：

// 创建命令
npx create-react-app 项目名
//启动命令
npm start

2、vite创建

在终端使用命令：

//创建命令
npm create vite@latest
//启动命令
npm run dev

按照选项，选择需要创建的项目。

二、react的文件配置

在这里插入图片描述
assets放置静态资源img、icon等其他资源。
component用于放置引入页面的各个组件。
pages放置需要展示或者跳转的页面。
rotuer创建页面的路由及对路由的配置，以及其他操作。
store仓库，保存数据对数据进行共享操作。
utils进行对axios进行封装，建立服务器与页面的连接进行数据交互。