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

配置VUE环境过程中 npm报错的处理方案以及VUE环境搭建过程

背景:VUE已经出来很久了,一直想研究这个东西也很久了。由于各种各样的原因,一直没有能处理。最近终于有时间可以研究了。 奈何报错了 嘤嘤嘤~~  针对报错情况,其实后来没有找到什么好的方案,几经周折,终于搭建好了。记录一下过程。

VUE搭建步骤

1、安装node

2、安装npm

3、安装vue-cli脚手架

4、创建新项目

前期,我已经安装了node.js,下载地址:下载 | Node.js 中文网

所以在cmd 窗口,输入node -v 的时候是有版本的,同时之前也是安装民npm 的,所以 在npm -v 也是对的,但是在进行全局vue-cli脚手架安装时就遇到了错误:使用的命令有 cnpm install --global vue-cli 以及 npm install --global vue-cli 。结果都在报错, 根据报错信息诸如:

TypeError: Class extends value undefined is not a constructor or null
at Object.<anonymous> (D:\Program Files\nodejs\node_modules\npm\node_modules\fs-minipass\lib\index.js:136:4)at Module._compile (node:internal/modules/cjs/loader:1256:14)at Module._extensions..js (node:internal/modules/cjs/loader:1310:10)at Module.load (node:internal/modules/cjs/loader:1119:32)at Module._load (node:internal/modules/cjs/loader:960:12)at Module.require (node:internal/modules/cjs/loader:1143:19)at require (node:internal/modules/cjs/helpers:119:18)at Object.<anonymous> (D:\Program Files\nodejs\node_modules\npm\node_modules\cacache\lib\content\read.js:4:13)at Module._compile (node:internal/modules/cjs/loader:1256:14)at Module._extensions..js (node:internal/modules/cjs/loader:1310:10)Node.js v18.18.2
D:\Program Files\nodejs\node_modules\npm\lib\es6\validate-engines.js:31throw err^TypeError: Class extends value undefined is not a constructor or nullat Object.<anonymous> (D:\Program Files\nodejs\node_modules\npm\node_modules\fs-minipass\lib\index.js:136:4)at Module._compile (node:internal/modules/cjs/loader:1256:14)at Module._extensions..js (node:internal/modules/cjs/loader:1310:10)at Module.load (node:internal/modules/cjs/loader:1119:32)at Module._load (node:internal/modules/cjs/loader:960:12)at Module.require (node:internal/modules/cjs/loader:1143:19)at require (node:internal/modules/cjs/helpers:119:18)at Object.<anonymous> (D:\Program Files\nodejs\node_modules\npm\node_modules\cacache\lib\content\read.js:4:13)at Module._compile (node:internal/modules/cjs/loader:1256:14)at Module._extensions..js (node:internal/modules/cjs/loader:1310:10)Node.js v18.18.2

我找到网上相关的资料,说是 使用:npm install --save-dev mini-css-extract-plugin等命令能解决问题,然而

npm install webpack -g也报错

于是,我反应过来,我遇到的这个问题,可能都没人有遇到过。

最终我决定: 

卸载node.js卸载干净 之后;重新安装node.js; 然后再进行环境搭建。

卸载node.js

卸载需要完全卸载:1、程序与功能里将node.js找到,卸载;2、清理环境变量,在系统环境变量里;将node.js相关的全部删除;3、最好重启电脑(我没有重启,据说不重启可能会报错,这次比较幸运,没有再报错)。

安装node.js

重新安装node.js ,安装过程比较慢,需要耐心等待,且中途会有360提示注册表被改,需要注意允许程序操作。

最终安装版本:

安装vue-cli脚手架

npm install -g @vue/cli  安装过程同样比较慢,需要等待。

出现如上信息时,表示vue-cli脚手架安装成功。

查询安装结果:vue -v:

创建第一个项目helllo-word

vue create hello-world

npm run serve启动项目

新建项目成功之后,进入项目目录,通过命令npm run serve启动项目,看到提示:

DONE  Compiled successfully in XXms 就表示项目正常启动了。

注意提示: 此时访问提示信息里的地址就可以访问了。

修改VUE默认端口

VUE默认端口是8080,如果电脑上有同时运行tomcat有等端口也是8080的就会出现端口冲突的情况,因此,需要根据实际情况修改端口。

修改方法: 进入到项目的目录,可以看到目录结构如下图所示:

在vue.config.js里即可进行修改:

我这里记录的是 vue 3.0的项目的目录结构,的2.0版本vue的项目里,配置项目端口的文件则在下项目下的config/下。 

关于不同版本的VUE项目目录结构,可以参考:VUE3.0学习系列随笔(二):VUE3.0和VUE2.0工程结构对比_vue2和3项目文件结构图解_一方通行00的博客-CSDN博客

相关文章:

配置VUE环境过程中 npm报错的处理方案以及VUE环境搭建过程

背景&#xff1a;VUE已经出来很久了&#xff0c;一直想研究这个东西也很久了。由于各种各样的原因&#xff0c;一直没有能处理。最近终于有时间可以研究了。 奈何报错了 嘤嘤嘤~~ 针对报错情况&#xff0c;其实后来没有找到什么好的方案&#xff0c;几经周折&#xff0c;终于搭…...

springboot 配置文件加载顺序

SpringBoot中配置文件的加载顺序是怎样的? 优先级从高到低&#xff0c;高优先级的配置覆盖低优先级的配置&#xff0c;所有配置会形成互补配置。 1.命令行参数。所有的配置都可以在命令行上进行指定; 2.Java系统属性(System.getProperties0) ; 3.操作系统环境变量 4.jar包外…...

二分查找java

一、题目。 给定一个 n 个元素有序的&#xff08;升序&#xff09;整型数组 nums 和一个目标值 target &#xff0c;写一个函数搜索 nums 中的 target&#xff0c;如果目标值存在返回下标&#xff0c;否则返回 -1。 示例 1: 输入: nums [-1,0,3,5,9,12], target 9 输出: 4…...

深入理解Java中的转义字符

最近在学习《两周自制脚本语言》这本书&#xff0c;在词法分析的一些复杂的正则中用到了大量的转义字符’\&#xff0c;比如正则字符串中包含了这个部分\\\\\"你知道它是匹配什么的么&#xff1f; 反斜杠在字符串和正则表达式中都有特殊作用。今天让我们来深入理解一下Ja…...

VScode 调试 linux内核

VScode 调试 linux内核 这里调试的 linux 内核是通过 LinuxSD卡(rootfs)运行的内核 gdb 命令行调试 编辑 /home/tyustli/.gdbinit 文件&#xff0c;参考 【GDB】 .gdbinit 文件 set auto-load safe-path /home/tyustli/code/open_source/kernel/linux-6.5.7/.gdbinit在 lin…...

Babylonjs学习笔记(五)——创建PBR材质

书接上回&#xff0c;这里讨论PBR材质&#xff01;&#xff01;&#xff01; // 创建天空盒/* */const createSkyBox (scene:Scene):void>{const envTex CubeTexture.CreateFromPrefilteredData(./env/environment.env,scene)scene.environmentTexture envTex;scene.cre…...

C++ -- 深入理解多态

前言&#xff1a;多态的概念&#xff0c;通俗地来讲就是多种形态。当我们要完成某个行为的时候&#xff0c;不同的对象去完成时会产生不同的状态&#xff0c;这就叫做多态。具体点就是去完成某个行为&#xff0c;当不同的对象去完成时会 产生出不同的状态。多态在C的类和对象中…...

【Java】泛型通配符

类型通配符 类型通配符<?> 一般用于接受使用&#xff0c;不能够做添加List<?>&#xff1a;表示元素类型未知的list&#xff0c;它的元素可以匹配任何类型带通配符的List仅表示它是各种泛型List的父类&#xff0c;并不能把元素添加到其中类型通配符上限&#xff1…...

NNDL:作业五

习题4-1 对于一个神经元,并使用梯度下降优化参数w时,如果输入x恒大于0,其收敛速度会比零均值化的输入更慢. 证明&#xff1a; 激活函数以sigmoid为例。 神经元&#xff1a;有两层&#xff0c;线性层和激活层&#xff1a;yw*xb,然后y‘sigmoid(y)&#xff0c;也就是。 梯度…...

OpenAI大模型项目计划表(InsCode AI 创作助手)

OpenAI大模型项目计划表 阶段任务负责人开始日期完成日期立项确定项目目标和范围项目经理2023-05-012023-05-03确定项目团队和资源项目经理2023-05-042023-05-05确定项目时间表和里程碑项目经理2023-05-062023-05-10数据收集收集训练数据和标注数据团队2023-05-112023-05-20确…...

MyBatis入门的第一个程序

2023.10.28 今天正式开始MyBatis的学习&#xff0c;先来一个入门程序的编写。 ①准备一个数据库表&#xff1a; ②配置pom.xml文件&#xff1a;&#xff08;打包方式和2个依赖的引入&#xff09; <?xml version"1.0" encoding"UTF-8"?> <proj…...

React项目中使用zustand状态管理详细教程

zustand 是一个用于状态管理的小巧而强大的库&#xff0c;它与 React 非常兼容。以下是使用 zustand 在 React 项目中进行状态管理的详细教程&#xff1a; 步骤 1&#xff1a;安装 zustand 首先&#xff0c;你需要安装 zustand。你可以使用 npm 或 yarn 安装它&#xff1a; …...

Linux 扩展 root 文件系统

本文描述的是通过Linux自带的工具&#xff0c;不用安装额外的包&#xff0c;来实现root文件系统的扩展。 我们可以看到&#xff0c;根盘46.6G&#xff1a; # lsblk NAME MAJ:MIN RM SIZE RO TYPE MOUNTPOINT sda 8:0 0 46.6G 0 disk ├─sda1 …...

19c-rac环境安装AHF

准备给19c rac打补丁&#xff0c;发现tfa报错&#xff0c;如下 [rootdb1 /]# /u01/app/19.0.0/grid_1/OPatch/opatchauto apply /opt/update/35370167/35319490 -oh /u01/app/19.0.0/grid_1 OPatchauto session is initiated at Sat Oct 28 19:33:56 2023 System initializ…...

ESP32网络开发实例-Web控制按钮与硬件状态同步

Web控制按钮与硬件状态同步 文章目录 Web控制按钮与硬件状态同步1、应用介绍2、软件准备3、硬件准备4、代码实现在文中,我们将介绍同时使用网络服务器和物理按钮来控制 ESP32输出。 换句话说,如果用户使用按钮控制 LED,则 LED 的状态也会在 Web 服务器上自动更新。 1、应用介…...

分享一下怎么做陪诊小程序

在当今快节奏的社会中&#xff0c;人们的生活压力越来越大&#xff0c;尤其是在大城市中&#xff0c;由于工作繁忙&#xff0c;生活节奏快&#xff0c;很多人都感到看病难、看病贵的问题。为了解决这一问题&#xff0c;陪诊小程序应运而生。陪诊小程序是一种可以提供线上预约、…...

【Linux】Linux+Nginx部署项目

&#x1f973;&#x1f973;Welcome Huihuis Code World ! !&#x1f973;&#x1f973; 接下来看看由辉辉所写的关于Linux的相关操作吧 目录 &#x1f973;&#x1f973;Welcome Huihuis Code World ! !&#x1f973;&#x1f973; 一.单体项目的部署 0.我们需要将要进行部…...

【git命令】删除分支

1. 删除本地分支 使用git branch -d命令删除本地分支 git branch -d branch_name其中&#xff0c;branch_name是分支名。如果有未合并的更改&#xff0c;Git会阻止你删除分支。 使用git branch -D命令强制删除本地分支 git branch -D branch_name这个命令会强制删除分支&am…...

LabVIEW开发TDS1000 和TDS2000 系列泰克示波器

LabVIEW开发TDS1000 和TDS2000 系列泰克示波器 泰克示波器是经常用到的工具&#xff0c;一般手动操作即可&#xff0c;但有时候也要集成到系统中&#xff0c;需要程控。这时候先要下载厂家提供的例子&#xff0c;了解LabVIEW的demo。根据不用的示波器型号&#xff0c;选择和计…...

1. 两数之和、Leetcode的Python实现

博客主页&#xff1a;&#x1f3c6;看看是李XX还是李歘歘 &#x1f3c6; &#x1f33a;每天分享一些包括但不限于计算机基础、算法等相关的知识点&#x1f33a; &#x1f497;点关注不迷路&#xff0c;总有一些&#x1f4d6;知识点&#x1f4d6;是你想要的&#x1f497; ⛽️今…...

K8S认证|CKS题库+答案| 11. AppArmor

目录 11. AppArmor 免费获取并激活 CKA_v1.31_模拟系统 题目 开始操作&#xff1a; 1&#xff09;、切换集群 2&#xff09;、切换节点 3&#xff09;、切换到 apparmor 的目录 4&#xff09;、执行 apparmor 策略模块 5&#xff09;、修改 pod 文件 6&#xff09;、…...

《Playwright:微软的自动化测试工具详解》

Playwright 简介:声明内容来自网络&#xff0c;将内容拼接整理出来的文档 Playwright 是微软开发的自动化测试工具&#xff0c;支持 Chrome、Firefox、Safari 等主流浏览器&#xff0c;提供多语言 API&#xff08;Python、JavaScript、Java、.NET&#xff09;。它的特点包括&a…...

最新SpringBoot+SpringCloud+Nacos微服务框架分享

文章目录 前言一、服务规划二、架构核心1.cloud的pom2.gateway的异常handler3.gateway的filter4、admin的pom5、admin的登录核心 三、code-helper分享总结 前言 最近有个活蛮赶的&#xff0c;根据Excel列的需求预估的工时直接打骨折&#xff0c;不要问我为什么&#xff0c;主要…...

GitHub 趋势日报 (2025年06月08日)

&#x1f4ca; 由 TrendForge 系统生成 | &#x1f310; https://trendforge.devlive.org/ &#x1f310; 本日报中的项目描述已自动翻译为中文 &#x1f4c8; 今日获星趋势图 今日获星趋势图 884 cognee 566 dify 414 HumanSystemOptimization 414 omni-tools 321 note-gen …...

零基础设计模式——行为型模式 - 责任链模式

第四部分&#xff1a;行为型模式 - 责任链模式 (Chain of Responsibility Pattern) 欢迎来到行为型模式的学习&#xff01;行为型模式关注对象之间的职责分配、算法封装和对象间的交互。我们将学习的第一个行为型模式是责任链模式。 核心思想&#xff1a;使多个对象都有机会处…...

今日科技热点速览

&#x1f525; 今日科技热点速览 &#x1f3ae; 任天堂Switch 2 正式发售 任天堂新一代游戏主机 Switch 2 今日正式上线发售&#xff0c;主打更强图形性能与沉浸式体验&#xff0c;支持多模态交互&#xff0c;受到全球玩家热捧 。 &#x1f916; 人工智能持续突破 DeepSeek-R1&…...

QT: `long long` 类型转换为 `QString` 2025.6.5

在 Qt 中&#xff0c;将 long long 类型转换为 QString 可以通过以下两种常用方法实现&#xff1a; 方法 1&#xff1a;使用 QString::number() 直接调用 QString 的静态方法 number()&#xff0c;将数值转换为字符串&#xff1a; long long value 1234567890123456789LL; …...

python报错No module named ‘tensorflow.keras‘

是由于不同版本的tensorflow下的keras所在的路径不同&#xff0c;结合所安装的tensorflow的目录结构修改from语句即可。 原语句&#xff1a; from tensorflow.keras.layers import Conv1D, MaxPooling1D, LSTM, Dense 修改后&#xff1a; from tensorflow.python.keras.lay…...

初探Service服务发现机制

1.Service简介 Service是将运行在一组Pod上的应用程序发布为网络服务的抽象方法。 主要功能&#xff1a;服务发现和负载均衡。 Service类型的包括ClusterIP类型、NodePort类型、LoadBalancer类型、ExternalName类型 2.Endpoints简介 Endpoints是一种Kubernetes资源&#xf…...

音视频——I2S 协议详解

I2S 协议详解 I2S (Inter-IC Sound) 协议是一种串行总线协议&#xff0c;专门用于在数字音频设备之间传输数字音频数据。它由飞利浦&#xff08;Philips&#xff09;公司开发&#xff0c;以其简单、高效和广泛的兼容性而闻名。 1. 信号线 I2S 协议通常使用三根或四根信号线&a…...