vscode创建/打开react项目流程

一、安装Node.js

请在官网下载安装:https://nodejs.org/zh-cn/
输入指令node -v,能显示版本号,说明 node 已经装好了
输入指令npm -v,能显示版本号,说明 npm 可以使用了

二、配置淘宝镜像

输入指令:
npm install -g cnpm --registry=https://registry.npm.taobao.org
输入指令cnpm -v,能显示版本号,说明 cnpm 已经装好了
请添加图片描述
如果出现上面的报错信息,则需要更改系统脚本运行权限
1.已管理员身份运行window PowerShell
2.输入 set-ExecutionPolicy RemoteSigned 然后回车
3.输入 Y或者A 然后回车
4.输入命令:get-ExecutionPolicy,查看修改结果
(1)Restricted:表示禁止终端使用命令的
(2)RemoteSigned:表示可以使用终端命令了

三、vscode配置管理员身份

在这里插入图片描述

四、全局安装脚手架

输入命令:npm install -g create-react-app
这需要等待一段时间,这个过程在安装三个东西
react: react的顶级库
react-dom: react在web段的运行环境
react-scripts: 包含运行和打包react应用程序的所有脚本及配置

五、创建项目

打开vscode,利用按键 ctrl+`,打开终端;
先创建一个放置项目的文件夹www;
在终端中使用cd指令跳转到这个文件夹;
创建项目指令:create-react-app your-app(your-app是项目名,可以自己取)

Success! Created your-app at /dir/your-app
Inside that directory, you can run several commands:

npm start
Starts the development server.

npm run build
Bundles the app into static files for production.

npm test
Starts the test runner.

npm run eject
Removes this tool and copies build dependencies, configuration files
and scripts into the app directory. If you do this, you can’t go back!

We suggest that you begin by typing:

cd your-app
npm start

Happy hacking!

通过cd your-app命令进入目录
运行npm start即可运行项目
生成项目的目录结构如下:
复制代码
├── README.md 使用方法的文档
├── node_modules 所有的依赖安装的目录
├── package-lock.json 锁定安装时的包的版本号,保证团队的依赖能保证一致。
├── package.json
├── public 静态公共目录
└── src 开发用的源代码目录

猜你喜欢

转载自blog.csdn.net/weixin_38359813/article/details/129363498