创建项目quick-generator-web
- 使用官方推荐的
npx create-react-app QuickGeneratorWeb创建
$ npx create-react-app QuickGeneratorWebCould not create a project called "QuickGeneratorWeb" because of npm naming restrictions: * name can no longer contain capital letters
报错:npm不再支持大写命名,改用小写重新创建
$ npx create-react-app quick-generator-web...A template was not provided. This is likely because you're using an outdated version of create-react-app.Please note that global installs of create-react-app are no longer supported.
报错: 生成的模板项目缺失文件,原因是create-react-app工具需要非全局安装且是最新的,卸载create-react-app
$ npm uninstall -g create-react-appremoved 63 packages in 2.251s$ rm -rf quick-generator-web/
重新创建项目
$ npx create-react-app quick-generator-webnpx: 98 安装成功，用时 77.74 秒Creating a new React app in D:\git\web\quick-generator-web.Installing packages. This might take a couple of minutes.Installing react, react-dom, and react-scripts with cra-template...yarn add v1.19.1[1/4] Resolving packages...[2/4] Fetching packages...info fsevents@1.2.12: The platform "win32" is incompatible with this module.info "fsevents@1.2.12" is an optional dependency and failed compatibility check. Excluding it from installation.info fsevents@2.1.2: The platform "win32" is incompatible with this module.info "fsevents@2.1.2" is an optional dependency and failed compatibility check. Excluding it from installation.[3/4] Linking dependencies...warning "react-scripts > @typescript-eslint/eslint-plugin > tsutils@3.17.1" has unmet peer dependency "typescript@>=2.8.0 || >= 3.2.0-dev || >= 3.3.0-dev || >= 3.4.0-dev || >= 3.5.0-dev || >= 3.6.0-dev || >= 3.6.0-beta || >= 3.7.0-dev || >= 3.7.0-beta".[4/4] Building fresh packages...success Saved lockfile.success Saved 13 new dependencies.info Direct dependencies├─ cra-template@1.0.3├─ react-dom@16.13.1├─ react-scripts@3.4.1└─ react@16.13.1info All dependencies├─ @babel/plugin-transform-flow-strip-types@7.9.0├─ @babel/plugin-transform-runtime@7.9.0├─ @babel/plugin-transform-typescript@7.9.6├─ @babel/preset-typescript@7.9.0├─ babel-preset-react-app@9.1.2├─ cra-template@1.0.3├─ eslint-config-react-app@5.2.1├─ react-dev-utils@10.2.1├─ react-dom@16.13.1├─ react-error-overlay@6.0.7├─ react-scripts@3.4.1├─ react@16.13.1└─ scheduler@0.19.1Done in 166.18s.Initialized a git repository.Installing template dependencies using yarnpkg...yarn add v1.19.1[1/4] Resolving packages...[2/4] Fetching packages...info fsevents@2.1.2: The platform "win32" is incompatible with this module.info "fsevents@2.1.2" is an optional dependency and failed compatibility check. Excluding it from installation.info fsevents@1.2.12: The platform "win32" is incompatible with this module.info "fsevents@1.2.12" is an optional dependency and failed compatibility check. Excluding it from installation.[3/4] Linking dependencies...warning "react-scripts > @typescript-eslint/eslint-plugin > tsutils@3.17.1" has unmet peer dependency "typescript@>=2.8.0 || >= 3.2.0-dev || >= 3.3.0-dev || >= 3.4.0-dev || >= 3.5.0-dev || >= 3.6.0-dev || >= 3.6.0-beta || >= 3.7.0-dev || >= 3.7.0-beta".warning " > @testing-library/user-event@7.2.1" has unmet peer dependency "@testing-library/dom@>=5".[4/4] Building fresh packages...success Saved lockfile.success Saved 20 new dependencies.info Direct dependencies├─ @testing-library/jest-dom@4.2.4├─ @testing-library/react@9.5.0├─ @testing-library/user-event@7.2.1├─ react-dom@16.13.1└─ react@16.13.1info All dependencies├─ @babel/runtime-corejs3@7.9.6├─ @sheerun/mutationobserver-shim@0.3.3├─ @testing-library/dom@6.16.0├─ @testing-library/jest-dom@4.2.4├─ @testing-library/react@9.5.0├─ @testing-library/user-event@7.2.1├─ @types/prop-types@15.7.3├─ @types/react-dom@16.9.8├─ @types/react@16.9.35├─ @types/testing-library__dom@7.0.2├─ @types/testing-library__react@9.1.3├─ css.escape@1.5.1├─ csstype@2.6.10├─ dom-accessibility-api@0.3.0├─ min-indent@1.0.0├─ react-dom@16.13.1├─ react@16.13.1├─ redent@3.0.0├─ strip-indent@3.0.0└─ wait-for-expect@3.0.2Done in 39.52s.Removing template package using yarnpkg...yarn remove v1.19.1[1/2] Removing module cra-template...[2/2] Regenerating lockfile and installing missing dependencies...info fsevents@2.1.2: The platform "win32" is incompatible with this module.info "fsevents@2.1.2" is an optional dependency and failed compatibility check. Excluding it from installation.info fsevents@1.2.12: The platform "win32" is incompatible with this module.info "fsevents@1.2.12" is an optional dependency and failed compatibility check. Excluding it from installation.warning " > @testing-library/user-event@7.2.1" has unmet peer dependency "@testing-library/dom@>=5".warning "react-scripts > @typescript-eslint/eslint-plugin > tsutils@3.17.1" has unmet peer dependency "typescript@>=2.8.0 || >= 3.2.0-dev || >= 3.3.0-dev || >= 3.4.0-dev || >= 3.5.0-dev || >= 3.6.0-dev || >= 3.6.0-beta || >= 3.7.0-dev || >= 3.7.0-beta".success Uninstalled packages.Done in 11.00s.Created git commit.Success! Created quick-generator-web at D:\git\web\quick-generator-webInside that directory, you can run several commands: yarn start Starts the development server. yarn build Bundles the app into static files for production. yarn test Starts the test runner. yarn 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 quick-generator-web yarn startHappy hacking!
创建成功,启动yarn start
$ yarn start
访问页面 http://localhost:3000/
参考文档
- react中文网
- 啥是npx
- 生成模板项目文件不全解决