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

Vue项目启动过程全记录(node.js运行环境搭建)

一、安装node.js并配置环境变量

1、安装node.js

从Node.js官网下载安装包并安装。然后在安装后的目录(如果是下载的压缩文件,则是解压缩的目录)下新建node_global和node_cache这两个文件夹。

node_global:npm全局安装位置
node_cache:npm缓存路径

在这里插入图片描述

2、配置环境变量

  1. 在系统变量里添加一个变量NODE_HOME,值为node.js的安装路径如:D:\Program Files\nodejs
    在这里插入图片描述
  2. 在Path中添加两个变量:

%NODE_HOME%
%NODE_HOME%\node_global

在这里插入图片描述

  1. 环境变量配置好后,打开cmd,输入node -v和npm -v,若显示出版本号,说明安装配置成功。

node -v
npm -v

在这里插入图片描述

3、配置npm全局模块路径和cache默认安装位置

在此步骤中所有npm命令最好以管理员身份运行的cmd中执行并且都要切换到node.js的安装目录下执行,不然可能导致无法识别。
说明:这一步是将前面安装之后新建的两个文件夹node_global(npm全局安装位置)和node_cache(npm缓存路径)与npm联系起来
打开cmd,将执行目录切换到node.js的安装目录,分别执行以下命令,

npm config set prefix “D:\Program Files\nodejs\node_global”
npm config set cache “D:\Program Files\nodejs\node_cache”

在这里插入图片描述
注意,路径用的引号是英文状态下的双引号,不是单引号,也不是中文的双引号。

4、修改npm镜像并安装cnpm

使用npm的官网镜像下载依赖包速度太慢,为了提高速度,这里我们使用npmmirror镜像,同样是在cmd中,将执行目录切换到node.js的安装目录,执行以下命令

npm install -g cnpm --registry=https://registry.npmmirror.com

在这里插入图片描述

5、安装vue-cli脚手架

以上都设置好后,重新打开cmd,执行以下命令,然后等待安装完成就行。

npm install -g @vue/cli

在这里插入图片描述
只要执行结果中没有出现 ERR! 都算执行成功了

二、启动Vue项目

说明:能正常运行的Vue项目的目录里都有一个名为node_modules的文件夹,里面存放了运行这个vue项目需要的所有依赖包,一般来讲,从网上直接clone来的别人的项目目录里是不会包含node_modules文件夹的,因为占得内存太大。所以要想运行别人的项目,必须先重新给它下载依赖包。

  1. 在Vue项目目录下打开cmd,执行cnpm install命令,等待npm安装完成(因为前面已经设置好了cnpm,所以这里可以直接用cnpm替换npm进行安装)

cnpm install

npm安装完成后,项目目录下就会出现node_modules文件夹了

  1. 然后执行cnpm run dev,运行vue项目

cnpm run dev

出现以上就代表项目成功运行,在浏览器中输入http://localhost:8088即可看到项目主界面(本项目因为端口号是8088,因此此端口为8088,这里的端口按项目实际端口号而定)。

注意:在执行命令时可能存在以下报错问题,可通过以下链接解决
创建vue项目时, 无法加载文件 D:\Program Files\nodejs\node_global\cnpm.ps1,因为在此系统上禁止运行脚本,解决方法。

相关文章:

Vue项目启动过程全记录(node.js运行环境搭建)

一、安装node.js并配置环境变量 1、安装node.js 从Node.js官网下载安装包并安装。然后在安装后的目录(如果是下载的压缩文件,则是解压缩的目录)下新建node_global和node_cache这两个文件夹。 node_global:npm全局安装位置 node_…...

Linux下如何配置环境变量

在Linux下配置环境变量通常有几种方法,具体取决于你希望将环境变量设置为全局还是仅对当前会话有效。以下是一些常见的方法: 永久性全局配置:要使环境变量在所有用户和会话中永久生效,可以编辑 /etc/environment 文件。在文件中添…...

PyCharm 主题和字体 (Scheme Editor Font)

PyCharm 主题和字体 [Scheme & Editor Font] References Scheme & Editor Font File -> Settings -> Editor -> Colors & Fonts -> Font Show only monospaced fonts: 只显示等宽字体。编程时使用等宽字体效果较好。 References [1] Yon…...

二叉树相关OJ题

创作不易,感谢三连!! 一、选择题 1、某二叉树共有 399 个结点,其中有 199 个度为 2 的结点,则该二叉树中的叶子结点数为( ) A.不存在这样的二叉树 B.200 C.198 D.199解析:选B&…...

文物保护系统守护历史岁月,成都青铜展科技闪耀

一、“吉金万里-中国西南青铜文明展”隆重开幕 1月27日,“吉金万里-中国西南青铜文明展”在成都金沙遗址博物馆向公众开放,奉上一场精彩的青铜文明“盛宴”。本次展览汇集了中国西南地区32家文博单位,以青铜器为代表的294件经典文物&#xf…...

[计算机网络]---Http协议

前言 作者:小蜗牛向前冲 名言:我可以接受失败,但我不能接受放弃 如果觉的博主的文章还不错的话,还请点赞,收藏,关注👀支持博主。如果发现有问题的地方欢迎❀大家在评论区指正 本期学习&#xf…...

Hexo删除主题

一、找到存放主题的目录 1、一般在入博客中的theme目录,这里以next主题为例。 在theme目录中,打开Git Bash Here; ls 列出主题目录 rm -rf 填需要删除的主题目录 2、另一种情况,以fluid主题为例;之前不知道是用那种…...

RK3399平台开发系列讲解(USB篇)U盘等存储类设备

🚀返回专栏总目录 文章目录 一、什么是U盘等存储类设备二、U盘设备传输数据结构三、U盘识别需要打开的宏沉淀、分享、成长,让自己和他人都能有所收获!😄 📢介绍U盘等存储类设备。 一、什么是U盘等存储类设备 USB Mass Storage Device Class(USB MSC/UMS) USB大容量存…...

一个页面需要加载大量的图片,如何提升用户体验?

当网站页面需要加载大量图片时,优化用户体验非常关键,以下是一些方法来提升用户体验: 图片懒加载(Lazy Loading):只加载用户可以看到的图片,当用户向下滚动页面时,再加载其他图片。这…...

JRT监听-PDF-Excel-Img

依赖全新设计,我们无需再顾虑历史兼容性的束缚;同时,基于多年来累积的深入需求理解,JRT监听机制巧妙地借助CMD命令模式,达成了监听的全面统一。无论是PDF、Excel还是图片文件,都不再需要特殊对待或额外区分…...

Pulsar-架构与设计

Pulsar架构与设计 一、背景和起源二、框架概述1.设计特点2.框架适用场景 三、架构图1.Broker2.持久化存储(Persistent storage)3.Pulsar元数据(Metadata store) 四、功能特性1.消息顺序性2.消息回溯3.消息去重4.消息重投递5.消息重…...

LeetCode每日一题589. N-ary Tree Preorder Traversal

文章目录 一、题目二、题解 一、题目 Given the root of an n-ary tree, return the preorder traversal of its nodes’ values. Nary-Tree input serialization is represented in their level order traversal. Each group of children is separated by the null value (S…...

html5移动端适配;检测浏览器信息函数

html5移动端适配 //动态改变font-size大小 (function changeFontSize() {let resizeEvt orientationchange in window ? orientationchange : resizeif (!isPC()) {let docEl document.documentElement;// recalc function () {let clientWidth docEl.clientWidth;docEl.…...

go依赖注入库samber/do使用

英语版本 介绍 以简单和高效而闻名的Go语言在其1.18版本中引入了泛型,这可以显着减少大量代码生成的需要,使该语言更加强大和灵活。如果您有兴趣, Go 泛型教程 是很好的学习资源。 通过使用 Go 的泛型,samber/do库为依赖注入 (…...

JMeter 配置元件之按条件读取CSV Data Set Config

实践环境 win10 JMeter 5.4.1 需求描述 需求是这样的,需要压测某个接口(取消分配接口),请求这个接口之前,需要先登录系统(物流WMS系统),并在登录后,选择并进入需要操作的仓库,然后请求接口,…...

MySQL跨服务器关联查询

1. 首先确认服务器的Federated引擎是否开启 show engines;修改数据库的配制文件my.ini,(我的my.ini的路径为:D:\ProgramData\MySQL\MySQL Server 5.7/my.ini),将federated添加到my.ini文件中 到MySQL的my.cnf配置文件中修改 在 [mysqld] 下方加入 federated 然后重…...

分库分表浅析

简介 对于任何系统而言,都会设计到数据库随着时间增长而累积越来越多的数据,系统也因为越来越多的需求变迁导致原有的设计不再满足现状,为了解决这些问题,分库分表就会走进视野,带着几个问题走入分库分表。 什么是分…...

java 宠物医院系统Myeclipse开发mysql数据库web结构jsp编程计算机网页项目

一、源码特点 java 宠物医院系统是一套完善的java web信息管理系统,对理解JSP java编程开发语言有帮助,系统具有完整的源代码和数据库,系统主要采用B/S模式开发。开发环境为TOMCAT7.0,Myeclipse8.5开发,数据库为Mysql5.0&…...

XMall 开源商城 SQL注入漏洞复现(CVE-2024-24112)

0x01 产品简介 XMall 开源电商商城 是开发者Exrick的一款基于SOA架构的分布式电商购物商城 前后端分离 前台商城:Vue全家桶 后台管理:Dubbo/SSM/Elasticsearch/Redis/MySQL/ActiveMQ/Shiro/Zookeeper等。 0x02 漏洞概述 XMall 开源商城 /item/list、/item/listSearch、/sys/…...

Docker原理及概念相关

Docker最核心的组件 image:镜像,构建容器,也可以通过Dockerfile文本描述镜像的内容。 (我们将应用程序运行所需的环境,打包为镜像文件) Container:容器 (你的应用程序,就跑在容器中 ) 镜像仓库(dockerhub)(…...

变量 varablie 声明- Rust 变量 let mut 声明与 C/C++ 变量声明对比分析

一、变量声明设计:let 与 mut 的哲学解析 Rust 采用 let 声明变量并通过 mut 显式标记可变性,这种设计体现了语言的核心哲学。以下是深度解析: 1.1 设计理念剖析 安全优先原则:默认不可变强制开发者明确声明意图 let x 5; …...

OpenLayers 可视化之热力图

注:当前使用的是 ol 5.3.0 版本,天地图使用的key请到天地图官网申请,并替换为自己的key 热力图(Heatmap)又叫热点图,是一种通过特殊高亮显示事物密度分布、变化趋势的数据可视化技术。采用颜色的深浅来显示…...

从零实现富文本编辑器#5-编辑器选区模型的状态结构表达

先前我们总结了浏览器选区模型的交互策略,并且实现了基本的选区操作,还调研了自绘选区的实现。那么相对的,我们还需要设计编辑器的选区表达,也可以称为模型选区。编辑器中应用变更时的操作范围,就是以模型选区为基准来…...

iPhone密码忘记了办?iPhoneUnlocker,iPhone解锁工具Aiseesoft iPhone Unlocker 高级注册版​分享

平时用 iPhone 的时候,难免会碰到解锁的麻烦事。比如密码忘了、人脸识别 / 指纹识别突然不灵,或者买了二手 iPhone 却被原来的 iCloud 账号锁住,这时候就需要靠谱的解锁工具来帮忙了。Aiseesoft iPhone Unlocker 就是专门解决这些问题的软件&…...

《用户共鸣指数(E)驱动品牌大模型种草:如何抢占大模型搜索结果情感高地》

在注意力分散、内容高度同质化的时代,情感连接已成为品牌破圈的关键通道。我们在服务大量品牌客户的过程中发现,消费者对内容的“有感”程度,正日益成为影响品牌传播效率与转化率的核心变量。在生成式AI驱动的内容生成与推荐环境中&#xff0…...

【服务器压力测试】本地PC电脑作为服务器运行时出现卡顿和资源紧张(Windows/Linux)

要让本地PC电脑作为服务器运行时出现卡顿和资源紧张的情况,可以通过以下几种方式模拟或触发: 1. 增加CPU负载 运行大量计算密集型任务,例如: 使用多线程循环执行复杂计算(如数学运算、加密解密等)。运行图…...

k8s业务程序联调工具-KtConnect

概述 原理 工具作用是建立了一个从本地到集群的单向VPN,根据VPN原理,打通两个内网必然需要借助一个公共中继节点,ktconnect工具巧妙的利用k8s原生的portforward能力,简化了建立连接的过程,apiserver间接起到了中继节…...

【论文阅读28】-CNN-BiLSTM-Attention-(2024)

本文把滑坡位移序列拆开、筛优质因子,再用 CNN-BiLSTM-Attention 来动态预测每个子序列,最后重构出总位移,预测效果超越传统模型。 文章目录 1 引言2 方法2.1 位移时间序列加性模型2.2 变分模态分解 (VMD) 具体步骤2.3.1 样本熵(S…...

Spring数据访问模块设计

前面我们已经完成了IoC和web模块的设计,聪明的码友立马就知道了,该到数据访问模块了,要不就这俩玩个6啊,查库势在必行,至此,它来了。 一、核心设计理念 1、痛点在哪 应用离不开数据(数据库、No…...

CSS设置元素的宽度根据其内容自动调整

width: fit-content 是 CSS 中的一个属性值&#xff0c;用于设置元素的宽度根据其内容自动调整&#xff0c;确保宽度刚好容纳内容而不会超出。 效果对比 默认情况&#xff08;width: auto&#xff09;&#xff1a; 块级元素&#xff08;如 <div>&#xff09;会占满父容器…...