初始化项目（nodejs和yarn安装）

最新推荐文章于 2025-05-06 14:57:39 发布

宏夏c

最新推荐文章于 2025-05-06 14:57:39 发布

阅读量1.1k

点赞数

分类专栏：项目学习文章标签： javascript 前端 npm

本文链接：https://blog.youkuaiyun.com/qq_32792547/article/details/130480805

版权

项目学习专栏收录该内容

3 篇文章

订阅专栏

1.安装node.js

什么是node.js

node.js介绍

在 Node.js 之前，JavaScript 只能运行在浏览器中，作为网页脚本使用，为网页添加一些特效，或者和服务器进行通信。有了 Node.js 以后，JavaScript 就可以脱离浏览器，像其它编程语言一样直接在计算机上使用，想干什么就干什么，再也不受浏览器的限制了。

Node.js 不是一门新的编程语言，也不是一个 JavaScript 框架，它是一套 JavaScript 运行环境，用来支持 JavaScript 代码的执行。用编程术语来讲，Node.js 是一个 JavaScript 运行时（Runtime）。

什么是npm

npm 是 Node.js 的包管理工具，用来安装各种 Node.js 的扩展。

npm 是 JavaScript 的包管理工具，也是世界上最大的软件注册表。有超过 60 万个 JavaScript 代码包可供下载，每周下载约 30 亿次。npm 让 JavaScript 开发人员可以轻松地使用其他开发人员共享的代码。

下载安装

直接百度到官网下载安装。

检查是否安装成功

node -v
npm -v

安装淘宝镜像

npm config set registry https://registry.npm.taobao.org

2.下载安装yarn

Yarn Facebook 贡献的 Javascript 包管理器

使用命令下载安装：

npm install -g yarn
 
如果上条命令安装失败，则尝试
sudo npm install -g yarn

3.使用ant design pro创建项目

ant design pro官网

Ant Design Pro 是基于 Ant Design 和 umi 的封装的一整套企业级中后台前端/设计解决方案，致力于在设计规范和基础组件的基础上，继续向上构建，提炼出典型模板/业务组件/配套设计资源。

3.1下载webstorm前端开发工具（也可以用vscode）

下载安装激活教程

4.启动项目

使用webstorm打开项目后，先在Terminal中输入命令安装依赖。

yarn
或者
nmp install

React可以理解为是对js的一个封装，为了更方便的开发前端界面。

Umi是对React的进一步封装，是一个可插拔的企业级 react 应用框架。

启动过程遇到的bug

Error: error:0308010C:digital envelope routines::unsupported

原因：版本问题

解决方法1：在项目终端中输入命令（每次项目重启都需要再次输入）
$env:NODE_OPTIONS="--openssl-legacy-provider"
随后执行该命令启动项目：
npm run dev
最优解决方法：降低nodejs版本，18降到16

使用nmp run dev启动的项目无法登录

原因：发现 dev/start:dev 相对于 start 多了 REACT_APP_ENV=dev MOCK=none 这一段，而其中的 MOCK=none 猜测和是否开启 mock 数据有关。

在 ant-design-pro 文档搜索 MOCK 关键词，找到了配置相关的说明

解决方法：使用npm run start命令启动

yarn : 无法加载文件 C:\Users\Doom\AppData\Roaming\npm\yarn.ps1，因为在此系统上禁止运行脚本。

原因：电脑系统阻止了这个脚本的运行，对这个脚本不信任，所以我们要更改系统的权限

解决方法：管理员身份运行Windows PowerShell，输入命令
set-ExecutionPolicy RemoteSigned