当前位置: 首页 > 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.lryc.cn/news/439807.html

相关文章:

  • 如何从混合信号中剔除某一信号——Schmidt正交化的使用(信号互相关)
  • I2C/IIC学习笔记
  • Servlet学习详解--基本涵盖所有Servlet知识点
  • LabVIEW机械手视觉引导系统
  • rabbitmq容器化部署
  • 如何用 Helm Chart 安装指定版本的 GitLab Runner?
  • el-table使用合计和固定列时,滚动条被覆盖区域无法拖拽问题
  • 【疑难杂症2024-005】docker-compose中设置容器的ip为固定ip后,服务无法启动
  • uView使用心得
  • RabbitMQ(高阶使用)死信队列
  • 怎么安装docker-compose
  • 【机器学习】--- 自监督学习
  • 【Linux修行路】网络套接字编程——UDP
  • 哈希表数据结构学习
  • 数据结构——“二叉搜索树”
  • Java零基础-Java对象详解
  • 从Prompt到创造:解锁AI的无限潜能
  • sqlgun靶场攻略
  • 《网络协议 - HTTP传输协议及状态码解析》
  • 9.11 QT ( Day 4)
  • 利用AI驱动智能BI数据可视化-深度评测Amazon Quicksight(四)
  • 2024.9最新:CUDA安装,pytorch库安装
  • Vue3.0组合式API:setup()函数
  • 利用AI驱动智能BI数据可视化-深度评测Amazon Quicksight(三)
  • 2022高教社杯全国大学生数学建模竞赛C题 问题一(1) Python代码演示
  • Qt QSerialPort数据发送和接收DataComm
  • macOS上谷歌浏览器的十大隐藏功能
  • 【C++篇】C++类与对象深度解析(二):类的默认成员函数详解
  • Linux2-mkdir,touch,cat,more
  • AI 时代程序员的应变之道