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,因为在此系统上禁止运行脚本,解决方法。

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

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

相关文章

Java并发基础:原子类之AtomicBoolean全面解析

本文概要 AtomicBoolean类优点在于能够确保布尔值在多线程环境下的原子性操作,避免了繁琐的同步措施,它提供了高效的非阻塞算法实现,可以大大提成程序的并发性能,AtomicBoolean的API设计非常简单易用。 AtomicBoolean核心概念 …

消息中间件之RocketMQ源码分析(十二)

Namesrv启动流程 Broker启动流程 BrokerStartup.java类主要负责为真正的启动过程做准备,解析脚本传过来的参数,初始化Broker配置,创建BrokerController实例等工作。BrokerController.java类是Broker的掌控者,它管理和控制Broker的…

openEuler2203 LTS安装并远程桌面接VMware WorkStation Pro 17

openEuler 2203 LTS默认只有命令行,没有GUI图形界面,在其中安装VMware WorkStation需要有图形界面的支持。这里以安装深度的DDE桌面环境,最后通过VNC远程桌面连接Linux服务器操作VMware WorkStation。 以下操作请保持网络能正常连接 1、安装…

react hook使用UEditor引入秀米图文排版

里面坑比较多,细节也比较多 以下使用的是react 18 ice3.0,使用其他react脚手架的配置基本相同,例如umi4 1.下载UEditor 进入UEditor仓库,找到版本v1.4.3.3,点击进去 接着下载ueditor1_4_3_3-utf8-jsp.zip版本 下载好…

MySQL 8.0.36 WorkBench安装

一、下载安装包 百度网盘链接:点击此处下载安装文件 提取码:hhwz 二、安装,跟着图片来 选择Custom,然后点Next 顺着左边框每一项的加号打开到每一个项的最底层,点击选中最底层的项目,再点击传过去右边的绿色箭头&a…

静态时序分析:SDC约束命令set_drive详解

相关阅读 静态时序分析https://blog.csdn.net/weixin_45791458/category_12567571.html 本章将讨论使用set_drive命令,它用于对输入端口的驱动能力建模。首先需要说明的是,默认情况下,DC在STA时默认输入端口的转换时间是0,这对于…

汇总利用YOLO8训练遇到的报错和解决方案(包含训练过程中验证阶段报错、精度报错、损失为Nan、不打印GFLOPs)

一、本文介绍 本文为专栏内读者和我个人在训练YOLOv8时遇到的各种错误解决方案,你遇到的问题本文基本上都能够解决,同时本文的内容为持续更新,定期汇总大家遇到的问题已经一些常见的问题答案,目前包含的问题已经解决方法汇总如下…

【Face Fusion】vs【Rope Opal】

文章目录 (一)简要说明(1.1)关于Face Fusion(1.2)关于Rope Opal (二)简要对比(2.1)对比表格(2.2)部分效果展示(2.2.1&…

npm run dev和npm run serve两个命令的区别

npm run dev和npm run serve两个命令的区别 前端开发过程中运行Vue项目的时候,有时候使用npm run serve命令可以启动项目,有时候却会报错;有时候使用npm run dev命令可以启动项目,有时候却也会报错。是什么原因造成这种情况呢&am…

探秘SuperCLUE-Safety:为中文大模型打造的多轮对抗安全新框架

探秘SuperCLUE-Safety:为中文大模型打造的多轮对抗安全新框架 进入2023年以来,ChatGPT的成功带动了国内大模型的快速发展,从通用大模型、垂直领域大模型到Agent智能体等多领域的发展。但是生成式大模型生成内容具有一定的不可控性&#xff0…

在Win系统部署WampServer并实现公网访问本地服务【内网穿透】

目录 推荐 前言 1.WampServer下载安装 2.WampServer启动 3.安装cpolar内网穿透 3.1 注册账号 3.2 下载cpolar客户端 3.3 登录cpolar web ui管理界面 3.4 创建公网地址 4.固定公网地址访问 推荐 前些天发现了一个巨牛的人工智能学习网站,通俗易懂&#xff0…

win10下wsl2使用记录(系统迁移到D盘、配置国内源、安装conda环境、配置pip源、安装pytorch-gpu环境、安装paddle-gpu环境)

wsl2 安装好后环境测试效果如下,支持命令nvidia-smi,不支持命令nvcc,usr/local目录下没有cuda文件夹。 系统迁移到非C盘 wsl安装的系统默认在c盘,为节省c盘空间进行迁移。 1、输出wsl -l 查看要迁移的系统名称 2、执行导出命…

找座位 - 华为OD统一考试(C卷)

OD统一考试(C卷) 分值: 100分 题解: Java / Python / C++ 题目描述 在一个大型体育场内举办了一场大型活动,由于疫情防控的需要,要求每位观众的必须间隔至少一个空位才允许落座。 现在给出一排观众座位分布图,座位中存在已落座的观众,请计算出,在不移动现有观众座位…

移动端学习:实现App中的下载功能,在手机接管文件系统

我感觉把学习中遇到的问题记录下来,写成文章,然后和很多人一起讨论,还是一个很不错的学习方法的。 问题描述 请问有大佬知道vue2项目打包的apk的导出功能为什么失效了吗?网页,h5的应该还是可以下载的。我又不想导出功能和后端有交互,想纯前端下载,网页的下载写法好像打…

UE5 C++ 静态加载资源和类

一.上篇文章创建组件并绑定之后 在Actor中加载初始化了组件&#xff0c;现在在组件中赋值。使用static ConstructorHelpers::FObjectFinder<T>TempName(TEXT("Copy Reference"))&#xff1b;再用TempName.Object //静态加载资源static ConstructorHelpers::FOb…

Unity MVC开发模式与开发流程详解

在Unity游戏开发中&#xff0c;采用MVC&#xff08;Model-View-Controller&#xff09;模式是一种非常常见的设计模式。MVC模式将应用程序分为三个部分&#xff1a;模型&#xff08;Model&#xff09;、视图&#xff08;View&#xff09;和控制器&#xff08;Controller&#x…

shell脚本实现Mysql分库分表备份

一.数据库的分库分表&#xff1f; 12张图把分库分表讲的明明白白&#xff01;阿里面试&#xff1a;我们为什么要分库分表https://mp.weixin.qq.com/s?__bizMzU0OTE4MzYzMw&mid2247547792&idx2&sn91a10823ceab0cb9db26e22783343deb&chksmfbb1b26eccc63b784879…

【云原生】Docker 安全与CA证书生成

目录 容器的安全行问题 Docker 容器与虚拟机的区别 Docker 存在的安全问题 1.Docker 自身漏洞 2.Docker 源码问题 Docker 架构缺陷与安全机制 1. 容器之间的局域网攻击 2. DDoS 攻击耗尽资源 3. 有漏洞的系统调用 4. 共享root用户权限 Docker 安全基线标准 1. 内…

CSB ---> (XXE)XML基础

本来今天想更一下CSbeacon上线多层的内网机器的&#xff0c;但是刚好今天是年后的第一节课&#xff0c;讲的是XXE的基础&#xff0c;那就来先盘一下基础&#xff01;&#xff01; 1.XXE XXE全称是XML External Entity即xml外部实体注入攻击&#xff01;其后果会导致用户…

蓝桥杯嵌入式第12届真题(完成) STM32G431

蓝桥杯嵌入式第12届真题(完成) STM32G431 题目 程序 main.c /* USER CODE BEGIN Header */ /********************************************************************************* file : main.c* brief : Main program body**************************…