webstorm配置vue开发环境

🌳🌳🌳前言:本文章针对于如何用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.hqwc.cn/news/3731.html

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

容器生态系统概念讲解

容器生态系统 这张图显示了 Docker、Kubernetes、CRI、OCI、containerd 和 runc 在这个生态系统中是如何结合的。 其工作流程简单来说是这样的: Docker,Kubernetes 等工具来运行一个容器时会调用容器运行时(CRI)比如 containerd…

探索Java集合框架的奥秘

文章目录 1. 引言2. Java 集合框架概览2.1 Collection接口2.1.1 List接口(1) ArrayList(数组)(2) Vector(数组实现、线程同步)(3) LinkedList(链表) 2.1.2 Set 接口(1) HashSet(Hash 表&#xf…

选择高考志愿:聚焦计算机科学与技术,规避土木工程

选择高考志愿:聚焦计算机科学与技术,规避土木工程 高考季已至,各地高考成绩陆续公布,许多毕业生和家长开始面临疑惑:如何填报志愿、选专业还是选学校、什么专业好就业?张雪峰曾提到:“普通家庭…

nvm 和 nrm安装使用

前端工具推荐:nvm(Node 版本管理工具) 和 nrm(管理npm源): 一、nvm 1.1 nvm 是什么 1.2 安装 nvm 1.3 使用 nvm 二、nrm 2.1 nrm 是什么 2.2 安装 nrm 2.3 使用 nrm 一、nvm 如果直接将 node 安装到…

常见面试题之线程中并发锁(一)

1. 讲一下synchronized关键字的底层原理? 1.1. 基本使用 如下抢票的代码,如果不加锁,就会出现超卖或者一张票卖给多个人 Synchronized【对象锁】采用互斥的方式让同一时刻至多只有一个线程能持有【对象锁】,其它线程再想获取这…

Midjourney教程古风人像类

古风图像的特点: 人物发型多为飘逸的长发,或是精致的盘发; 人物服装多为飘逸的长袍、长裙; 整体画风以水墨、水彩、工笔为c主,线条写意,色彩清新淡雅; 背景中多用花鸟、亭台楼阁、桃林等构建氛…

INDEMIND双目视觉惯性模组实时生成点云并保存点云图

双目惯性相机最开始是从VINS中了解到的,2018年VINS中推荐过Loitor视觉惯性相机,但是后来看到GitHub Issue中有人反映Loitor丢帧、无技术支持等问题,加之购入渠道非官方故未入手Loitor,浏览知乎时关注到Indemind的该款产品&#xf…

FreeRTOS—任务基础知识

文章目录 一、FreeRTOS任务特性二、FreeRTOS任务状态三、FreeRTOS任务优先级四、FreeRTOS任务实现五、任务控制块六、任务堆栈 一、FreeRTOS任务特性 简单没有使用限制(任务数量没有显示,一个优先级下可以有多个任务)支持抢占(高…

C语言结构体字节对齐(内存对齐)之#pragma pack和__attribute__((packed)的使用

在不使用#pragma pack和__attribute__((packed) 等选项来自定义字节对齐大小的情况下,关于正常字节对齐的描述,可参考博文: C/C计算类/结构体和联合体(union)所占内存大小(内存对齐问题)_联合体…

通付盾发布WAAP白皮书,帮助企业应对数字化转型过程中日益高发的网络安全威胁

简介 企业数字化转型是数字经济发展的重要一环。面对企业数字化转型过程中的安全问题,WAAP白皮书将对攻击方式、攻击量、攻击来源、行业分布等维度对各类攻击进行详细解读,梳理传统Web应用防护能力的不足,分析日益增长的API防护,…

H5学习(三)-- CSS层叠样式表

文章目录 一、简介二、CSS的书写样式1. 行内样式(内联样式)2. 页内样式3. 外部样式 三、常见的选择器1. 标签选择器2. 类选择器3. id选择器4. 并列选择器5. 复合选择器6. 伪类选择器 一、简介 CSS(cascading style sheet)是层叠样…

奇舞周刊第497期:解锁 PDF 文件:使用 JavaScript 和 Canvas 渲染 PDF 内容

记得点击文章末尾的“ 阅读原文 ”查看哟~ 下面先一起看下本期周刊 摘要 吧~ 奇舞推荐 ■ ■ ■ 解锁 PDF 文件:使用 JavaScript 和 Canvas 渲染 PDF 内容 最近研究了 Web 的 FileSystemAccess Api,它弥补了 Web 长期以来缺少的能力:操作用户…