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

news/2024/7/1 6:02:08

一、安装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://lihuaxi.xjx100.cn/news/2033630.html

相关文章

Java多线程系列——锁

0.引言 在并发编程中,锁是一种重要的同步机制,用于控制对共享资源的访问。Java 提供了多种锁的实现,每种锁都有不同的特性和适用场景。本文将深入介绍 Java 中常见的锁类型,包括内置锁、显式锁、读写锁等,并讨论它们的…

HttpClient:HTTP GET请求的服务器响应输出

前言 在现代软件开发中,与网络通信相关的技术变得愈发重要。Java作为一种强大而灵活的编程语言,提供了丰富的工具和库,用于处理各种网络通信场景。本文将聚焦在Java中使用HttpClient库发送HTTP GET请求,并将服务器的响应数据进行…

代码随想录 Leetcode435. 无重叠区间

题目&#xff1a; 代码(首刷看解析 2024年2月17日&#xff09;&#xff1a; class Solution { private:const static bool cmp(vector<int>& a,vector<int>& b) {return a[0] < b[0];} public:int eraseOverlapIntervals(vector<vector<int>&…

Java_方法(重载方法签名等详解)

在之前我们学习C语言时&#xff0c;当我们想要重复使用某段代码的功能时&#xff0c;我们会将这段代码定义为一个函数&#xff0c;而在java中我们把这段重复使用的代码叫做方法。 方法的定义 类体的内容分为变量的声明和方法的定义&#xff0c;方法的定义包括两部分&#xff1…

NHANES数据库使用(1)

官网&#xff1a;NHANES - National Health and Nutrition Examination Survey Homepagehttps://www.cdc.gov/nchs/nhanes/index.htm 1、打开数据库 2、 选择数据集 B区检索方法和变量。C区检索数据集。A区含有B区和C区的功能。选择 NHANES 2017-March 2020打开。 3、打开数据…

iOS总体框架介绍和详尽说明

iOS是由苹果公司开发的移动操作系统&#xff0c;为iPhone、iPad、iPod Touch等设备提供支持。iOS采用了基于Unix的核心&#xff08;称为Darwin&#xff09;&#xff0c;并采用了类似于Mac OS X的图形用户界面。以下是iOS的总体框架介绍和详尽说明&#xff1a; UIKit框架&#…

【漏洞复现-通达OA】通达OA swfupload_new存在前台SQL注入漏洞

一、漏洞简介 通达OA(Office Anywhere网络智能办公系统)是由北京通达信科科技有限公司自主研发的协同办公自动化软件,是与中国企业管理实践相结合形成的综合管理办公平台。通达OA为各行业不同规模的众多用户提供信息化管理能力,包括流程审批、行政办公、日常事务、数据统计…