当前位置: 首页 > news >正文

Node.js 安装及项目实践

node.js安装

node安装,选择版本
在这里插入图片描述
一直next,或者自己修改路径,添加两个包在这里插入图片描述

选择自己的安装的node的路径,cmd或者win+r cmd
在这里插入图片描述
在这里插入图片描述

显示node与npm的版本号

node -v
npm -v

在这里插入图片描述

可以跟着这个博客将node安装
2024最新版Node.js下载安装及环境配置教程(非常详细)

安装yarn

在这里插入图片描述

npm install -g yarn

查看版本

yarn -v

在这里插入图片描述

创建一个项目

添加脚本架开箱即用的中台前端/设计解决方案
创建一个关于存放前端的文件夹,在那个文件夹打开cmd
在这里插入图片描述

yarn create umi myapp

问题

文件名、目录名或卷标语法不正确。
error Command failed.

在这里插入图片描述
Yarn 的全局安装位置与 bin 目录位置不一致会引发问题,二者需处于同一硬盘分区。

yarn global bin
yarn global dir

在这里插入图片描述

解决问题

yarn config set global -folder "D:\HTMl5\node_global"

路径与npm一致,全局安装与缓存

yarn config set cache-folder "D:\HTMl5\node_cache"

在这里插入图片描述

使用 npm

npm i @ant-design/pro-cli -g
pro create myapp

在这里插入图片描述

Get-ExecutionPolicy
Set-ExecutionPolicy -Scope CurrentUser,再输入RemoteSigned即可

No change to package.json was detected. No package manager install
will be executed.

未检测到 package.json 有变化。不会执行包管理器安装。>

在这里插入图片描述
在这里插入图片描述

npm install --legacy-peer-deps

在这里插入图片描述

npm run start

在这里插入图片描述
个人建议前端代码用webstorm
webstorm安装教程
如果是空白的页面,修改路由器
在这里插入图片描述
在这里插入图片描述

插件安装

在这里插入图片描述
file -》setting -》plugins
在这里插入图片描述
安装重启。
在这里插入图片描述

问题

pnpm : 无法将“pnpm”项识别为
cmdlet、函数、脚本文件或可运行程序的名称。请检查名称的拼写,如果包括路径,请确保路径正确,然后再试一次。 所在位置 行:1 字符: 3

在这里插入图片描述

  pnpm add -D @umijs/plugins

添加npx试试
在这里插入图片描述

代码瘦身

移除国际化
在这里插入图片描述


http://www.mrgr.cn/news/28625.html

相关文章:

  • 大数据新视界 -- 大数据大厂之 Impala 存储格式转换:从原理到实践,开启大数据性能优化星际之旅(下)(20/30)
  • Python自动化运维DevSecOps与安全自动化
  • 代码随想录训练营Day24 | 134. 加油站 - 135. 分发糖果 - 860.柠檬水找零 - 406.根据身高重建队列
  • 图片的鱼眼批量矫正算法
  • HTTP常见的请求头有哪些?都有什么作用?在 Web 应用中使用这些请求头?
  • Webpack 1.13.2 执行 shell 命令解决 打印时没有背景色和文字颜色的问题
  • MySQL索引
  • istio中serviceentry结合vs、dr实现多版本路由
  • 【计算机网络 - 基础问题】每日 3 题(九)
  • [C++]类和对象(下)
  • Oracle(129) 如何使用闪回归档(Flashback Archive)?
  • Ollama:本地运行大模型【含UI界面】
  • Leetcode—815. 公交路线【困难】(unordered_map+queue)
  • 在线教育平台项目
  • Pytorch详解-模型模块(RNN,CNN,FNN,LSTM,GRU,TCN,Transformer)
  • 几种常见的机器学习分类模型及代码实现
  • 基于python+django+vue的学生成绩管理系统
  • vue3+ts
  • 828华为云征文 | 云服务器Flexus X实例:轻量级http服务器 Tinyhttpd 部署
  • WGCAT可以导出工单吗
  • Java HashMap 总结
  • 为Galaxy S22用户提供高效的三星数据恢复
  • 【网络】DNS,域名解析系统
  • python基本数据类型简记
  • 【JavaSE】--数组的定义与使用
  • 65. 有效数字