React之解决create-react-app创建项目没有src和public文件的问题

最新推荐文章于 2022-01-05 23:45:39 发布
最新推荐文章于 2022-01-05 23:45:39 发布
阅读量1.7k 收藏 3
点赞数
分类专栏： react 文章标签： reactjs
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Welkin_qing/article/details/107761911
版权

文章目录

项目创建

1. 首先安装create-react-app

npm install -g create-react-app

2. 创建项目

官网提供的方式是以下命令
在这里插入图片描述
我创建了自己的项目之后，打开发现里面的目录不一样
官网是

而我的只有package.json node_modules 缺少src文件夹和public文件夹
。。。（等等）

唯一解决办法

不要在看其他博客说是卸载create-react-app等等其他的
只需要换个命令，使用--template typescript创建就OK了

create-react-app (项目名字）--template typescript
Welkin_qing
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
react脚手架在组件中引入public下的图片不能显示的解决方法
m0_63135041的博客
04-29 719
react脚手架在组件中引入public下的图片不能显示的解决方法
React项目打包布署及打包后页面可能找不到文件的解决方法
duansamve的博客
03-08 2539
1、打包 在项目目录下，运行npm run build，进行打包，打包完成后会在目录下生成一个build文件夹，build生成的东西要放在服务器root下。 2、部署 打包之前，package.json文件中要增加一个homepage字段： "homepage": ".", 布署的时候你必须把build里的文件直接放到服务器上，假如你的服务器IP是xx.xx.xx.xx，服务器端口为80...
VueCli3，4中src问题
胖胖的博客
03-16 909
封装tabbar时发现图片显示不出来，检查了下我的图片确实放在assets文件夹下。 检查了下绑定的路径写错没 tabbar: [ { tabbarImg: "@/assets/img/tabbar/首页.svg", tabbarText: "首页" }, { tabbarImg: "@/assets/img/tabbar/分类.svg", tabbarText: ...
总结create-react-app创建项目时没有src和public文件的解决方法
yijie_0_的博客
01-05 1323
第一个解决方法 清缓存 npm cache clean --force 第二个解决方法 依次找到C:\Users\你的电脑名称\AppData\Roaming\npm下面有关create-react-app字眼的文件夹删掉，我是这四个文件，删掉后重新执行 npm install create-react-app -g create-react-app 项目名称 cd 项目名称 yarn start 第三个解决方法 换个命令试下 create-react-app (项目名字）--template t
react以create-react-app为基础创建项目
11-30
【React项目创建与配置】 React 是一个流行的JavaScript库，...以上内容涵盖了基于`create-react-app`创建React项目的基本步骤和常见的配置调整方法。了解这些知识，你将能够更加高效地管理和自定义你的React项目。
create-react-app修改为多页面支持的方法
12-03
但有时我们需要创建有SEO优化的多页网站，此时就需要对create-react-app进行定制。 首先，要修改`create-react-app`为多页面支持，你需要确保已经初始化了一个项目，并运行`yarn run eject`命令。这会将原本隐藏的...
create-react-app-chrome-extension-boilerplate:创建React App Chrome扩展样板
05-16
该项目是使用适用于Chrome扩展程序的Create React App引导的。截图，当您单击Chrome中的扩展程序时资料夹结构创建后，您的项目应如下所示： my-app/ README.md node_modules/ package.json public/ index....
create-react-app-offline:离线创建无构建配置的React应用
05-12
创建React App（离线版本-CRAO） 每次都无需脱机创建没有构建配置的React应用程序。安装CLI 第一次，您需要通过此命令安装CRAO CLI，然后才能离线创建React应用。npm install -g create-react-app-offline用法很简单...
create-react-app 没有[src] 文件夹（记一次问题）
01-07
缘起 在使用 npx create-react-app xx-app 的时候创建项目后没有scr 文件夹,看了一下package.json也不对 然后顺势检查来一下 nodejs npm yarn 什么的都是正常的, 非常疑惑，然后去github 翻了翻 问题原因 是因为官方已经弃用了独立安装包 create-react-app 这个 cli 脚手架，如果没有及时卸载 就会出现这个问题。 解决 卸载全局安装包 npm uninstall -g create-react-app && yarn global remove create-react-app 然后使用 旧的cli 测试一下 => s
create-react-app 基础上配置优化
路上
08-20 362
版本详情： { "name": "react-study", "version": "0.1.0", "private": true, "dependencies": { "@babel/core": "7.12.3", "@pmmmwh/react-refresh-webpack-plugin": "0.4.3", "@svgr/webpack": "5...
用npx create-react-app my-app创建react app没有src以及public文件夹
qq_35666211的博客
04-21 1307
搭建环境： npm -v ：6.4.1 node -v ：10.15.3 1，按照官方文档https://www.html.cn/create-react-app/docs/getting-started/ 运行npx create-react-app my-app 创建的文件如下所示只有2个文件，src以及public以及其他文件没有 解决方法： 网上搜索方法: http://www.bub...
react-create-app src引入目录外部文件冲突问题：Relative imports outside of src/ are not supported....
dieang2090的博客
07-05 3997
使用react-create-app构建的项目，当src文件夹下文件想引用src文件夹外文件因为官方限制问题会报以下错误。 Module not found: You attempted to import ****** which falls outside of the project src/ directory. Relative imports outside of src/...
create-react-app脚手架如何引入public下的css
ferrysoul的博客
04-14 2797
引入src文件夹外的css样式报错：Relative imports outside of src/ are not supported. 解决办法： 1，项目直接eject命令，如果之前执行过了产生了webpack等文件就不用再执行。 2，将webpack.config.js中ModuleScopePlugin命令注释掉即可。 //n...
React 项目搭建及目录结构
热门推荐
qq_33358824的博客
06-14 1万+
首先，关于React的配置可以先参考之前的博客。（React代码规范建议阅读 Airbnb React代码规范，提高代码质量。）上面就是前端项目的目录结构。static是静态资源目录。component是经过react编写的组件。css是整体布局的样式。util是写模块化的函数或工具函数。下面这张图是component的组成。每一个文件夹都是内部具体的组件。router是用来管理路由文件。 uti...
React使用公共文件夹public
weixin_39782183的博客
03-09 5010
参考文章 在刚学React/Vue的时候，配合webpack脚手架学习的过程中，碰到一个问题会非常疑惑，比如在React中有个Public文件夹可以放静态资源，但是在src目录中同样有个assets文件夹，这个同样也是放静态资源的，这个就很困惑了，为何放置静态资源的地方会有两个？ 两者区别 其实放在两个文件夹区别就在于是否会被webpack所处理，如果您将文件放入该public文件夹，webp...
node项目的基本结构
BoyJoan的博客
06-20 4083
node项目的基本机构bin:项目的启动文件node_modules:项目的依赖库public:项目的静态文件(css,js,img)routes:项目的路由views:视图目录文件(相当有mvc里的v)app.js:项目的入口和程序启动文件package.json:项目的基本信息(名称,版本等信息) bin:项目的启动文件 // 引入模块依赖 var app = require('../ap...
用create-react-app创建 的react项目中实现多页面应用
最新发布
03-29
create-react-app 是一个用于快速创建 React 应用程序的命令行工具，它默认创建的是单页面应用。如果需要实现多页面应用，可以按照以下步骤进行操作： 1. 在 src 目录下创建多个页面文件夹，如 page1、page2 等，每个文件夹中创建一个 index.js 和一个 index.html 文件。 2. 在 index.js 文件中编写 React 组件，作为页面的内容。 3. 在 index.html 文件中引入打包后的 js 文件和其他必要的资源文件。 4. 在 public 目录下创建多个 html 文件，分别对应不同的页面，如 page1.html、page2.html 等。 5. 修改 package.json 文件中的 scripts 部分，新增多个打包命令，如： ``` "scripts": { "start": "react-scripts start", "build:page1": "react-scripts build --entry ./src/page1/index.js --output-path build/page1", "build:page2": "react-scripts build --entry ./src/page2/index.js --output-path build/page2", "build": "npm run build:page1 && npm run build:page2" }, ``` 这样就可以通过 npm run build:page1 和 npm run build:page2 命令分别打包不同的页面，打包后的文件会输出到 build/page1 和 build/page2 目录下。 6. 在 public 目录下创建多个入口 html 文件，如 page1.html、page2.html 等，每个 html 文件引入相应的 js 文件即可。 7. 使用服务器部署打包后的文件，访问不同的 html 文件即可进入不同的页面。 需要注意的是，这种方式下，每个页面都需要重新加载 React 应用程序，可能会影响性能。如果需要实现更好的性能和用户体验，可以考虑使用 React Router 实现单页面应用。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值