devbox
我家小花儿
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

“依”本日记（一）安装配置NodeJs、WebStorm、Umi、Umi-UI_node 安装umi

作者：我家小花儿 | 2024-06-12 22:01:15

赞

踩

node 安装umi

先划到最后看完整步骤，在定位到每一步的详细步骤

一、进入NodeJs官网地址下载安装包

https://nodejs.org/zh-cn/download/icon-default.png?t=N7T8https://nodejs.org/zh-cn/download/

二、安装NodeJs程序配置环境

Node.js下载安装及环境配置教程【超详细】_nodejs下载-CSDN博客icon-default.png?t=N7T8https://blog.csdn.net/WHF__/article/details/129362462

三、window终端安装yarn

npm install g yarn

 【Error1】npm install 卡在“sill IdealTree buildDeps”上，npm改为cnpm。由于是国外下载速度过慢的可以更换淘宝镜像:

npm install -g cnpm --registry=https://registry.npm.taobao.org

然后使用cnpm install 即可，安装完成 

四、创建项目文件夹和初始化脚手架

1、首先，我们需要先创建一个空文件夹用于存放管理项目，直接在路径上敲入cmd跳转终端

执行npm install umi命令进行安装，也可全局安装 npm install -g umi 

  1. npm install umi
  2. #或者
  3. npm install -g umi 

2、create umi 来快速的初始化脚手架 #使用 yarn

yarn create umi myapp

3、这步运行成功，可以看到untitled目录下出现了app的文件夹 ，这时候已经成功创建了一个关键的项目文件夹myapp。

五、通过脚手架创建项目（WebStorm创建 umi 项目）

安装完成后，运行命令npm create umi，会提示安装create-umi，根据命令提示进行下一步就可

npm create umi

接着出现以下选择题

  1. Need to install the following packages:
  2.   create-umi@4.0.6
  3. Ok to proceed? (y)


选择y，之后会提示选择模版，创建对应文件

  1. ? Pick Umi App Template › - Use arrow-keys. Return to submit.
  2.  Simple App
  3.  Ant Design Pro
  4.  Vue Simple App


根据需要选择自己所需，本文中使用的是 Ant Design Pro

 

  1. ✔ Pick Umi App Template › Ant Design Pro
  2. ? Pick Npm Client › - Use arrow-keys. Return to submit.
  3. ❯   npm
  4.     cnpm
  5.     tnpm
  6.     yarn
  7.     pnpm


依旧是根据需要选择自己所需，本文中使用的是 npm

  1. ✔ Pick Umi App Template › Ant Design Pro
  2. ✔ Pick Npm Client › npm
  3. ? Pick Npm Registry › - Use arrow-keys. Return to submit.
  4. ❯   npm
  5.     taobao

同样选择，本文中使用的是 npm，选择完之后，创建项目

  1. ✔ Pick Umi App Template › Ant Design Pro
  2. ✔ Pick Npm Client › npm
  3. ✔ Pick Npm Registry › npm

安装完成 ，可以看到项目已经包含了所需的文件内容，配置文件、项目文件、依赖等。windows终端的任务基本到这结束，下一步打开webstorm的终端。

 

六、安装web

WebStorm: The JavaScript and TypeScript IDE, by JetBrainsicon-default.png?t=N7T8https://www.jetbrains.com/webstorm/选择安装路径，勾选全选安装，一路next。

 【Error2】Cannot open Local Terminal Failed to start [PowerShell.exe](WebStorm终端打不开)

在File > Settings > Tools > Terminal 里，把Shell path改为c:\windows\system32\cmd.exe(找到自己的cmd.exe在哪里)

七、安装依赖node、npm（cnpm)、yarn(tyarn)、npx、git、pro

打开WebStorm的终端，安装依赖，检查有没有node、npm（cnpm)、yarn(tyarn)、npx

  1. #查看版本，有版本就安装好。如果显示“不是内部命令”，就要安装
  2. node -v
  3. npm -v（cnpm)
  4. yarn -v(tyarn)

八、启动本地开发

  1. yarn start
  2. #或者
  3. npm run start

如果顺利，可以看到 

点击 http://localhost:8000 可看到以下界面，这样就算成功了。

九、安装umi-UI悬浮小窗口

（中间出错误太多，把网上能找到的代码都试了，最后终于装好。）

打开WebStorm的终端，安装umi-ui

  1. npm i @ant-design/pro-cli@3.1.0 -g
  2. #或者
  3. yarn add umijs/preset-ui -D

【Error3】webstorm不能运行git（可忽略）

终端显示了一个错误【Error4】：'git' 不是内部或外部命令，也不是可运行的程序。我有重新装上git

1）找到git安装中bin的路径，如：D:\Program Files (x86)\Git\bin；同时，找到git安装中git-core的路径，我的是：D:\xxxx\Git\libexec\git-core

2）配置系统变量。右键“计算机”->“属性”->“高级系统设置”->“环境变量”->在下方的“系统变量”中找到“path”->选中“path”并选择“编辑”->新建->将1中找到的bin和git-core路径复制到其中->逐级确定并退出。

3）设置完重启编辑器!
http://t.csdnimg.cn/EJxvuicon-default.png?t=N7T8http://t.csdnimg.cn/EJxvu

【Error4】No change to package.json was detected. No package manager install will be executed.yarn和npm依赖冲突（package.json was detected）

这个提示是由于没有对 package.json 文件进行更改所导致的，因此无需运行包管理器的安装。

如果你想要更新依赖关系，你需要在 package.json 文件中进行更改，然后运行包管理器的安装命令。这将根据package.json 文件中的依赖关系安装所需的软件包。如果使用的是 yarn，则可以运行以下命令：

yarn install

 然后运行：

yarn add @umijs/preset-ui -D

（成功）这样就是装好了umi-ui

【Error5】“Please open a new empty folder重新在空文件夹打开”=从创建空项目文件夹那重头再来

当我试着打开，他却让我重新在空文件夹运行，我重新建了一个文件夹，我重头再来。创建一个空文件夹untitled，在这个路径下打开cmd，初始化。

 pro-cli 来快速的初始化脚手架。

  1. # 使用 npm
  2.  
  3. npm i @ant-design/pro-cli -g
  4.  
  5. npx pro create myapp

选择umi@3版本！

  1. ? 
    声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/我家小花儿/article/detail/709807
    推荐阅读
    相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。