zqy233的前端学习笔记项目创建与配置
使用create-react-app
create-react-app是react官方的脚手架，可以使用其快速创建一个react项目的模板
下载全局脚手架命令创建项目
sh
npm i -g create-react-app
create-react-app react-project-name
npm i -g create-react-app
create-react-app react-project-name
使用npm init
sh
npm init react-app react-project-name
npm init react-app react-project-name
使用npx
sh
npx create-react-app react-project-name
npx create-react-app react-project-name
创建支持 typescript 的项目
sh
npx create-react-app ts-app --template typescript
npx create-react-app ts-app --template typescript
npm init <initializer> 命令创建一个新的或者已经存在的 npm 包，initializer 表示名为 create-<initializer> 的 npm 包，将使用 npx 安装，然后执行其 package.json 中 bin 属性对应的脚本，所以该命令实际上是使用 npx 运行create-react-app这个 npm 包，从而下载模板
官方说明也给出了命令相对应的一些示例：
| 命令 | 等同 |
|---|---|
| npm init foo | npx create-foo |
| npm init @usr | npx @usr/create |
| npm init @usr/foo | npx @usr/create-foo |
bash
# 进入项目目录
cd react-project-name
# 使用vscode打开当前目录的项目
code ./
# 启动项目
yarn start
# 进入项目目录
cd react-project-name
# 使用vscode打开当前目录的项目
code ./
# 启动项目
yarn start
使用 create-vite
bash
# npm
npm init vite
# yarn
yarn create vite
# npm
npm init vite
# yarn
yarn create vite
直接创建模板
bash
# npm 6.x
npm create vite react-project-name --template react
# npm 7+, extra double-dash is needed:
npm create vite react-project-name -- --template react
# yarn
yarn create vite react-project-name --template react
# pnpm
pnpm create vite react-project-name -- --template react
# npm 6.x
npm create vite react-project-name --template react
# npm 7+, extra double-dash is needed:
npm create vite react-project-name -- --template react
# yarn
yarn create vite react-project-name --template react
# pnpm
pnpm create vite react-project-name -- --template react
创建 ts 模板
bash
# npm 6.x
npm create vite react-project-name --template react-ts
# npm 7+, extra double-dash is needed:
npm create vite react-project-name -- --template react-ts
# yarn
yarn create vite react-project-name --template react-ts
# pnpm
pnpm create vite react-project-name -- --template react-ts
# npm 6.x
npm create vite react-project-name --template react-ts
# npm 7+, extra double-dash is needed:
npm create vite react-project-name -- --template react-ts
# yarn
yarn create vite react-project-name --template react-ts
# pnpm
pnpm create vite react-project-name -- --template react-ts
并且跟 create-react-app不同的，需要进入目录后自行下载依赖
bash
# 进入项目目录
cd react-project-name
# 使用vscode打开项目
code ./
# yarn
yarn
# 运行项目
npm run dev
# 进入项目目录
cd react-project-name
# 使用vscode打开项目
code ./
# yarn
yarn
# 运行项目
npm run dev