webstorm配置vue开发环境

news2025/1/10 0:03:39

🌳🌳🌳前言:本文章针对于如何用IDE和webstorm运行一个别人的vue项目进行步骤记录。


 📙参考:(10条消息) idea配置vue开发环境_idea配置vue运行环境_drinkworld的博客-CSDN博客https://blog.csdn.net/drinkworld/article/details/109223224

📙参考:(9条消息) node.js压缩版安装教程_node压缩包怎么安装_=的博客-CSDN博客icon-default.png?t=N5K3https://blog.csdn.net/weixin_42211670/article/details/107724967📙 参考:(8条消息) Git 详细安装教程(详解 Git 安装过程的每一个步骤)_git安装_mukes的博客-CSDN博客https://blog.csdn.net/mukes/article/details/115693833


目录

一、安装node.js

1.下载最新版node.js

2.默认安装

3.安装淘宝镜像(类似于阿里云的maven中央仓库镜像)

4.安装webpack

5.全局安装vue-cli

二、安装git

三、运行已有vue代码

1.导入项目

2.点击serve,配置node

四、报错降node.js的版本

五、node.js压缩版安装

1.下载node.js

2.解压

3.配置环境变量


一、安装node.js

1.下载最新版node.js

下载地址:Node.js (nodejs.org)

2.默认安装

安装完毕后,安装是否成功

node -v
npm -v

3.安装淘宝镜像(类似于阿里云的maven中央仓库镜像)

安装时间略长。

安装命令:npm install -g cnpm --registry=https://registry.npm.taobao.org
验证命令:cnpm –v

 4.安装webpack

利用cnpm安装webpack 命令行语句为cnpm install webpack -g  。时间略长。

测试代码:webpack -v

测试安装成功的界面如下:

5.全局安装vue-cli

安装语句为:

安装语句为:cnpm install --global vue-cli
验证命令:vue -V (V要大写)

二、安装git

 📙 参考:(8条消息) Git 详细安装教程(详解 Git 安装过程的每一个步骤)_git安装_mukes的博客-CSDN博客

三、运行已有vue代码

1.导入项目

导入已有vue项目,右击选中,show npm scripts

2.点击serve,配置node

可能会报错,尝试重新webstorm后,执行npm install或cnpm install

 

 然后,点击serve运行项目,出现的链接直接访问就可以了

四、报错降node.js的版本

出现错误“this[kHandle] = new _Hash(algorithm, xofLen);”

发现是node.js版本太高了,要降低,降到16以下

下载链接:Index of /download/release/v16.19.0/ (nodejs.org)

五、node.js压缩版安装

1.下载node.js

可以看三

2.解压

解压下载的压缩包,然后在安装目录下新建两个文件夹node-cache 和node-global

然后,在当前目录里打开cmd窗口,配置NPM全局模块路径和cache默认安装位置

npm config set cache "F:\node-v16.19.0-win-x64\node-cache"
npm config set prefix "F:\node-v16.19.0-win-x64\node-global"

操作技巧:进入该文件夹,然后复制路径即可

3.配置环境变量

目的操作:

1.新建NODE_HOME变量,值为node.js的安装目录

2.在原有的path变量最后边添加:

;%NODE_HOME%;%NODE_HOME%\node-globa;		 

记录一下步骤:设置-系统-关于-高级系统设置-环境变量

 步骤截图:

 

 

 这个是已经配好了,配好了才记录的

重点步骤1:新建NODE_HOME变量,值为node.js安装根目录

 

 重点步骤2:在原有的path变量最后边添加:

;%NODE_HOME%;%NODE_HOME%\node-globa;		 

 

 

 检查配置

 到这里,就安装完成了。


 🐳自我总结:配环境的一天啊!


💬一起加油!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/685847.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

VSCode ssh ubuntu20显示图像界面

1、在vscode中安装 Remote X11(SSH) 2、在本地端安装MobaXterm 点击Settings-->Configurations-->X11,设置如下: 3、在服务端修改 ~/.bashrc文件,在末尾添加 export DISPLAY"192.168.0.201:0.0" 其中引号中内容为本地端IP地…

英伟达股价能否凭借AI进一步上涨到500美元?

来源: 猛兽财经 作者:猛兽财经 猛兽财经在之前的关于英伟达的分析中(5月2日),就认为英伟达在人工智能方面的增长潜力还没有完全释放出来,并认为英伟达的股价将会很快涨到300美元,结果到了6月…

代码随想录二刷 day34 | 贪心之1005.K次取反后最大化的数组和 134. 加油站 135. 分发糖果

1005.K次取反后最大化的数组和 题目链接 解题思路: 两次贪心 如何可以让数组和最大呢? 局部最优:让绝对值大的负数变为正数,当前数值达到最大,整体最优:整个数组和达到最大 如何转变K次正负,让…

CASS打印地形图操作

1、打开地形图,如下: 2、在“工程应用”菜单栏中,选择“查询两点距离及方位”,如下: 3、量取地形图的大致范围大小,如下: 读取图上距离,用于设置纸张大小。 4、点击左上角打印图形&…

【算法题】神奇的斐波那契数列(Fibonacci sequence)、青蛙跳台阶问题、矩阵中的路径

神奇的斐波那契数列和青蛙跳台阶问题 一、神奇的斐波那契数列1.1、题目描述1.2、递归算法1.3、迭代法1.4、小结 二、青蛙跳台阶问题2.1、题目描述2.2、思路2.3、动态规划法2.4、小结 三、矩阵中的路径3.1、题目描述3.2、思路3.3、代码实现3.4、小结 总结 一、神奇的斐波那契数列…

卫星地图应用经典实例项目(7个)

本文会介绍引用一些非常好的卫星地图等相关的应用,一方面给大家增加见识,另一方面会提供一些设计开发的思路以及代码。 文章目录 热气球追踪系统googlemap实现卫星轨迹satvis卫星Cesium系统NASA的worldview系统项目Esri-Satellite-Map基于leaflet的卫星轨迹绘制项目地球当前…

关于Altium Designer 差分线规则设置的方法纠偏

本文适用于AD20以后版本。在AD的原理图及pcb的4年设计学习中,入门课是学校的AD09,简单的两层板绘制。后来因工作需要,就报了培训班,学习了基于AD19的相关使用方法。后来在很多的项目开发中,逐渐发现之前从书本、培训课…

Qt QGraphicsScene模块实现圆点绘制在所有窗体的最前方,实现圆点的“彩色拖尾”效果以及“选中方框”效果

文章目录 前言1、效果2、代码实现2.1 思路2.1.1 “拖尾”效果2.1.2 “选中方框区域”效果2.2 代码 总结 系列文章: (一)Qt 将某控件、图案绘制在最前面的方法,通过QGraphicsScene模块实现 (二)Qt QGraphics…

【SCI/SSCI/EI录用案例】仅26天录用,1天见刊

【Unionpub学术】录用/见刊/检索案例:2023年6月10日-2023年6月16日 2区材料类SCI 【期刊简介】IF:3.5-4.0,JCR2区,中科院3区 【检索情况】SCI 在检,正刊 【征稿领域】降解材料及其相关技术的研发,如聚合物基轻质材…

PyTorch 2简介:卷积神经网络

介绍 在本系列的上一部分中,我们使用了CIFAR-10数据集,并介绍了PyTorch的基础知识: 张量及其相关操作数据集和数据加载器构建基本的神经网络基本模型的训练和评估 我们为CIFAR-10数据集中的图像分类开发的模型只能在验证集上达到53%的准确率&…

Observability:为 Logstash 输出配置 SSL/TLS - Elastic Agent

在我之前的文章 “Observability:如何把 Elastic Agent 采集的数据输入到 Logstash 并最终写入到 Elasticsearch”,我详细介绍了如何使用 Elastic Agents 采集数据并把数据通过 Logstash 发送至 Elasticsearch。细心的开发者可能注意到从 Elastic Agents…

Jmeter(三) - 从入门到精通 - 测试计划(Test Plan)的元件(详解教程)

1.简介 上一篇中我已经教你如何通过JMeter来创建一个测试计划(Test Plan),那么这一篇我们就将JMeter启动起来,创建一个测试计划(Test plan),然后现在给大家介绍一下测试计划(Test P…

Redis和数据库保持数据一致性方案

Redis和数据库一致性又称为“双写一致性”,在分布式系统中,由于多个节点之间的并发读写操作,可能导致数据不一致的情况发生。本文将着重介绍如何通过使用Redis与数据库相结合的方案来实现数据一致性。 数据不一致产生的原因: 首先…

Android应用开发(5)Activity生命周期

Android应用开发学习笔记——目录索引 参考android官网: https://developer.android.google.cn/reference/android/app/Activity.html activity 生命周期的阶段 | Android 开发者 | Android Developers activity生命周期(这篇足够了)_…

pycharm中插件的使用;

pycharm中插件的使用; 1.英语翻译插件 Translation 使用方法 在pycharm中输入英文,右键,例如输入port想知道这个意思, 中文 也是一样的 2.pycharm的中文界面插件,安装后就是中文界面了

VSCode编译器环境下,调试3d-tiles-validator

VSCode编译器环境下,调试3d-tiles-validator 1. 源代码环境准备2. VsCode环境装备3. 调试 1. 源代码环境准备 参照3d-tiles-validator仓库的README.md文件 Clone the repository into the current directory:git clone https://github.com/CesiumGS/3d-tiles-vali…

Dubbo3.0.7+Nacos2.0.3整合服务注册及发现

Dubbo3的新特性和修改这里就不再赘述了&#xff0c;个人认为主要是注册的颗粒度的改变&#xff0c;把之前的接口级改成了应用级&#xff0c;减少了注册列表的数量更易于维护。 服务端&#xff1a; pom.xml <dependencies><dependency><groupId>org.spring…

前端系列19集-vue3引入高德地图,响应式,自适应

npm i amap/amap-jsapi-loader --save import AMapLoader from amap/amap-jsapi-loader // 使用加载器加载JSAPI&#xff0c;可以避免异步加载、重复加载等常见错误加载错误 //为地图注册click事件获取鼠标点击出的经纬度坐标 map.on("click", function (e: any) { …

30分钟了解所有引擎组件,132个Unity 游戏引擎组件速通!【收藏 == 学会】

前言 &#x1f3ac;【全网首发】 | 30分钟了解所有组件&#xff0c;132个Unity 游戏引擎组件速通&#xff01;一、Mesh 网格1.Mesh Filter2.Mesh Renderer3.Skinned Mesh Renderer4.Text Mesh5.TextMeshPro-Text 二、Effects 特效组件1.Particle System2.Visual Effect3.Trail …

一篇一个CV模型,第(1)篇:StyleGAN

写在前面&#xff1a; 虽说自己肯定对外宣称自己是搞CV的&#xff0c;但是其实在自己接近两年半(&#x1f414;)的研究生生涯中&#xff0c;也没有熟练掌握过很多个CV领域的模型&#xff0c;或者说是CV领域的概念。我认为这个东西是必须得补的&#xff0c;不然作为CV算法工程师…