尧图网站建设 
Umi 如何用 create-umi 创建 React 项目并启动开发服务器【免费下载链接】umiA framework in react community ✨项目地址: https://gitcode.com/GitHub_Trending/um/umi如果你的目标是用 Umi 的官方脚手架create-umi从零创建一个 React 项目并把本地开发服务器跑起来验证页面可访问这篇文章给出完整的主路径准备 Node 与包管理环境、执行创建命令、根据脚手架的交互选项生成项目、启动 dev server最后按文档给出的终端输出和浏览器地址判断启动是否成功。以下操作路径来自仓库中的快速上手、脚手架与开发环境文档。环境准备创建和运行项目前需要准备两类环境Node.js快速上手要求 node 版本为 22 或以上。文档建议使用 nvm 管理 node 版本Windows 下推荐 nvm-windowsmac 或 linux 下可用文档给出的脚本安装 nvm 后执行$ nvm install 22 $ nvm use 22 $ node -v v22.21.1注意一个文档间差异开发环境文档写的是 Node 18 以上即可而快速上手要求 22 或以上。按创建项目的主流程文档以 22 及以上为准。包管理工具node 默认自带 npm但 umi 团队推荐 pnpm。安装并验证$ curl -fsSL https://get.pnpm.io/install.sh | sh - $ pnpm -v 7.3.0另外可以按习惯准备一个 IDE 或文本编辑器文档推荐 VS Code 或 WebStorm。用 create-umi 创建项目推荐主路径pnpm 用户$ pnpm create umi my-umi-app不带目录参数时脚手架会以交互方式让你输入文件夹名称带上参数如my-umi-app则直接在当前目录的该文件夹下创建项目。等价写法是pnpm dlx create-umilatest它会先提示是否安装create-umi包。其他包管理工具的等价命令# npm $ npx create-umilatest # yarn $ yarn create umi # bun文档说明需要 bun 0.4.0 $ bunx create-umi命令会安装create-umi脚手架并自动运行运行过程中有两个交互选项Pick Npm Client选择依赖管理工具可选 npm、cnpm、tnpm、yarn、pnpm其中 pnpm 是 Umi 官方推荐项Pick Npm Registry选择 npm 源可选 npm 或 taobaonpmmirror。选完后脚手架生成一个最基本的 Umi 项目并根据选中的客户端和镜像源自动安装依赖。文档给出的国内建议是选 pnpm taobao 源。创建成功后会自动执行umi setup做文件预处理。创建时常用的可选参数optiondescription--no-git创建项目但不初始化 Git--no-install创建项目但不自动安装依赖如果要用特定模板而不是默认的 Simple App也可以用模板方式创建例如从 electron 模板创建# 从 umijs/electron-template 创建一个 electron 模板 pnpm create umi --template electron创建出来的项目结构按脚手架文档选择后自动生成的默认项目结构如下. ├── package.json ├── pnpm-lock.yaml ├── src │ ├── assets │ │ └── yay.jpg │ ├── layouts │ │ ├── index.less │ │ └── index.tsx │ └── pages │ ├── docs.tsx │ └── index.tsx ├── tsconfig.json └── typings.d.ts到此Umi 项目初始化即完成。若创建时使用了--no-install需要自行用所选的包管理工具安装依赖后再继续。启动开发服务器进入项目目录执行 dev 脚本启动本地开发服务器$ pnpm dev文档示例输出如下数值为文档示例实际端口和编译时长可能不同╔═════════════════════════════════════════════════════╗ ║ App listening at: ║ ║ Local: https://127.0.0.1:8000 ║ ready - ║ Network: https://192.168.1.1:8000 ║ ║ ║ ║ Now you can open browser with the above addresses ║ ╚═════════════════════════════════════════════════════╝ event - compiled successfully in 1121 ms (388 modules) event - MFSU compiled successfully in 1308 ms (875 modules)验证启动成功判断启动是否成功的两个依据都来自快速上手文档终端输出看到App listening at的地址框以及compiled successfully的编译完成事件上面的1121 ms、388 modules等数值是文档示例结果不是固定预期浏览器访问在浏览器打开 http://localhost:8000/ 能看到项目模板页面即说明 dev server 已正常工作。限制与说明Node 版本要求在不同文档中不一致18 与 22前文已说明取舍使用 bun 初始化要求 bun 0.4.0文档称这种方式初始化更快属于可选分支主路径不依赖 bun--no-install跳过的只是依赖安装后续仍需手动安装依赖才能执行pnpm dev。下一步项目跑起来后快速上手还给出了两个后续操作用pnpm umi g交互式启用 Prettier可选用pnpm build构建生产产物到./dist目录进行部署发布。完整的umi dev、umi build等命令行说明见命令行文档。【免费下载链接】umiA framework in react community ✨项目地址: https://gitcode.com/GitHub_Trending/um/umi创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 Umi 如何用 create-umi 创建 React 项目并启动开发服务器
Umi 如何用 create-umi 创建 React 项目并启动开发服务器【免费下载链接】umiA framework in react community ✨项目地址: https://gitcode.com/GitHub_Trending/um/umi如果你的目标是用 Umi 的官方脚手架create-umi从零创建一个 React 项目并把本地开发服务器跑起来验证页面可访问这篇文章给出完整的主路径准备 Node 与包管理环境、执行创建命令、根据脚手架的交互选项生成项目、启动 dev server最后按文档给出的终端输出和浏览器地址判断启动是否成功。以下操作路径来自仓库中的快速上手、脚手架与开发环境文档。环境准备创建和运行项目前需要准备两类环境Node.js快速上手要求 node 版本为 22 或以上。文档建议使用 nvm 管理 node 版本Windows 下推荐 nvm-windowsmac 或 linux 下可用文档给出的脚本安装 nvm 后执行$ nvm install 22 $ nvm use 22 $ node -v v22.21.1注意一个文档间差异开发环境文档写的是 Node 18 以上即可而快速上手要求 22 或以上。按创建项目的主流程文档以 22 及以上为准。包管理工具node 默认自带 npm但 umi 团队推荐 pnpm。安装并验证$ curl -fsSL https://get.pnpm.io/install.sh | sh - $ pnpm -v 7.3.0另外可以按习惯准备一个 IDE 或文本编辑器文档推荐 VS Code 或 WebStorm。用 create-umi 创建项目推荐主路径pnpm 用户$ pnpm create umi my-umi-app不带目录参数时脚手架会以交互方式让你输入文件夹名称带上参数如my-umi-app则直接在当前目录的该文件夹下创建项目。等价写法是pnpm dlx create-umilatest它会先提示是否安装create-umi包。其他包管理工具的等价命令# npm $ npx create-umilatest # yarn $ yarn create umi # bun文档说明需要 bun 0.4.0 $ bunx create-umi命令会安装create-umi脚手架并自动运行运行过程中有两个交互选项Pick Npm Client选择依赖管理工具可选 npm、cnpm、tnpm、yarn、pnpm其中 pnpm 是 Umi 官方推荐项Pick Npm Registry选择 npm 源可选 npm 或 taobaonpmmirror。选完后脚手架生成一个最基本的 Umi 项目并根据选中的客户端和镜像源自动安装依赖。文档给出的国内建议是选 pnpm taobao 源。创建成功后会自动执行umi setup做文件预处理。创建时常用的可选参数optiondescription--no-git创建项目但不初始化 Git--no-install创建项目但不自动安装依赖如果要用特定模板而不是默认的 Simple App也可以用模板方式创建例如从 electron 模板创建# 从 umijs/electron-template 创建一个 electron 模板 pnpm create umi --template electron创建出来的项目结构按脚手架文档选择后自动生成的默认项目结构如下. ├── package.json ├── pnpm-lock.yaml ├── src │ ├── assets │ │ └── yay.jpg │ ├── layouts │ │ ├── index.less │ │ └── index.tsx │ └── pages │ ├── docs.tsx │ └── index.tsx ├── tsconfig.json └── typings.d.ts到此Umi 项目初始化即完成。若创建时使用了--no-install需要自行用所选的包管理工具安装依赖后再继续。启动开发服务器进入项目目录执行 dev 脚本启动本地开发服务器$ pnpm dev文档示例输出如下数值为文档示例实际端口和编译时长可能不同╔═════════════════════════════════════════════════════╗ ║ App listening at: ║ ║ Local: https://127.0.0.1:8000 ║ ready - ║ Network: https://192.168.1.1:8000 ║ ║ ║ ║ Now you can open browser with the above addresses ║ ╚═════════════════════════════════════════════════════╝ event - compiled successfully in 1121 ms (388 modules) event - MFSU compiled successfully in 1308 ms (875 modules)验证启动成功判断启动是否成功的两个依据都来自快速上手文档终端输出看到App listening at的地址框以及compiled successfully的编译完成事件上面的1121 ms、388 modules等数值是文档示例结果不是固定预期浏览器访问在浏览器打开 http://localhost:8000/ 能看到项目模板页面即说明 dev server 已正常工作。限制与说明Node 版本要求在不同文档中不一致18 与 22前文已说明取舍使用 bun 初始化要求 bun 0.4.0文档称这种方式初始化更快属于可选分支主路径不依赖 bun--no-install跳过的只是依赖安装后续仍需手动安装依赖才能执行pnpm dev。下一步项目跑起来后快速上手还给出了两个后续操作用pnpm umi g交互式启用 Prettier可选用pnpm build构建生产产物到./dist目录进行部署发布。完整的umi dev、umi build等命令行说明见命令行文档。【免费下载链接】umiA framework in react community ✨项目地址: https://gitcode.com/GitHub_Trending/um/umi创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考