React脚手架
React脚手架和vue一样,react也有它开发用的脚手架,能够快速的创建一个项目结构,并下载部分依赖。安装之前的准备准备好node.js运行环境,大家可以去搜索node的安装和配置,这里不做详细介绍,整篇文章默认大家已经安装并配置了nodejs及其全局环境;全局安装create-react-app工具:npm install create-react-app -g;可能要花上几...
·
React脚手架
- 和vue一样,react也有它开发用的脚手架,能够快速的创建一个项目结构,并下载部分依赖。
安装之前的准备
- 准备好node.js运行环境,大家可以去搜索node的安装和配置,这里不做详细介绍,整篇文章默认大家已经安装并配置了nodejs及其全局环境;
- 全局安装
create-react-app
工具:npm install create-react-app -g
; - 可能要花上几分钟,因为要下很多插件和依赖,如果因为下载npm官方的包比较慢,可以安装淘宝的cnpm镜像:
npm install -g cnpm --registry=https://registry.npm.taobao.org
然后用cnpm代替npm即可。
整好开干
- 打开你喜欢的一种可以使用控制台指令的工具,可以是git的bash,可以是vscode的终端,也可以是系统自带的cmd控制台;
- cd到你的项目文件夹下;
- 注意文件夹不要用中文,不然户很麻烦。
create-react-app [项目名]
创建你的项目,项目名小写,不要包含中文(因为脚手架创建项目的时候会使用npm init
,而默认-y参数会以文件夹名作为packge.json里的一个参数值,在生成这个值的时候中文会引发报错)。- 等待几分钟后你可以看到这样一个结构:
- 项目创建完成会提示你修改的指令(即script属性里的指令替换),以及怎么运行这个项目的方法:
- 根据目录创建的这些文件,这些命令分别是用来运行不同的文件的:
npm start #运行开发环境服务
npm run build #将项目打包捆绑成用于生产环境的静态文件
npm test #运行测试文件
npm run eject # ↵
#将所有工具和包移动并将其配置为项目的依赖,这样会把这些文件都差到package.json文件的dependences下
#为的是开发时使用了自定义的第三方库能被准确标记。
- 可以看到项目创建的时候有两个app.js 和app.test.js 这就是两个用于生产和开发的文件,在测试代码无误后可以添加进入生产使用文件里。
- 按照提示运行项目:
cd [项目文件夹内]
npm start
- 运行成功会有这样的提示:
你可以通过下面提供的两个地址:本地地址local: http://localhost:3000
访问当前项目,或者网络中的地址:http://192.168.43.252:3000
进行访问。
它一般会自动打开你的默认浏览器并默认访问local的地址:
如果加载过慢,可能是默认加载了node_moduls里的依赖,这里文件非常多,那么请在设置里忽略加载这些文件。
更多推荐
已为社区贡献1条内容
所有评论(0)