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

news2025/1/20 16:18:00

一、安装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.coloradmin.cn/o/1455168.html

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

相关文章

Python 字符串格式化输出

前些天发现了一个巨牛的人工智能学习网站,通俗易懂,风趣幽默,忍不住分享一下给大家。点击跳转到网站零基础入门的AI学习网站~。 前言 字符串格式化是编程中一个常见的需求,它可以们将不同类型的数据(如数字、文本、日…

【ansible】认识ansible,了解常用的模块

目录 一、ansible是什么? 二、ansible的特点? 三、ansible与其他运维工具的对比 四、ansible的环境部署 第一步:配置主机清单 第二步:完成密钥对免密登录 五、ansible基于命令行完成常用的模块学习 模块1:comma…

Shiro反弹shell和权限绕过含工具包

★★免责声明★★ 文章中涉及的程序(方法)可能带有攻击性,仅供安全研究与学习之用,读者将信息做其他用途,由Ta承担全部法律及连带责任,文章作者不承担任何法律及连带责任。 1、前言 反序列化漏洞原理和Shiro反序列化漏洞原理请参…

AI绘画图生图怎么用?

AI绘画图生图是指利用人工智能技术,将一张已有的图片转化为另一张具有艺术风格的新图片的过程。这种技术可以应用于多个领域,如室内设计等。 在使用AI绘画图生图功能时,用户需要选择一张参考图片,然后设置生成图片的风格、尺寸、数…

svg之全局组件,配合雪碧图解决vue2的svg优化问题

这里是vue2中的svg的完整解决方案的另一篇。 <template><svg :class"svgClass"><use :xlink:href"#${name}"></use></svg> </template><script>export default {name: icon,props: {name: {type: String,requi…

Bonjour Print Services

Bonjour Print Services &#xff08;apple mobile&#xff09; https://download.csdn.net/download/spencer_tseng/88845785

C++ 离散化 算法 (详解)+ 例题

1、性质 把无限空间中有限的个体映射到有限的空间中去&#xff0c;以此提高算法的空间效率。通俗的说&#xff0c;离散化是在不改变数据相对大小的条件下&#xff0c;对数据进行相应的压缩。 适用范围&#xff1a;数的跨度很大&#xff0c;用的数很稀疏 例如&#xff1a;值域…

Java实现Dfs算法(基本讲解)

目录 一、Dfs算法的概念 二、Dfs算法的设计步骤 三、Dfs算法模板 四、Dfs算法经典例题 &#xff08;1&#xff09;全排列 &#xff08;2&#xff09;N皇后 一、Dfs算法的概念 Depth First Search 即 DFS&#xff0c;意为深度优先搜索&#xff0c;是所有的搜索手段之一。它…

[Flink03] Flink安装

本文介绍Flink的安装步骤&#xff0c;主要是Flink的独立部署模式&#xff0c;它不依赖其他平台。文中内容分为4块&#xff1a;前置准备、Flink本地模式搭建、Flink Standalone搭建、Flink Standalong HA搭建。 演示使用的Flink版本是1.15.4&#xff0c;官方文档地址&#xff1…

Shellcode免杀对抗(C/C++)

Shellcode C/C免杀&#xff0c;绕过360安全卫士、火绒安全、Defender C/C基于cs/msf的上线 首先是测试一下shellcode上线&#xff0c;主要是俩种方法 测试环境 攻击机&#xff1a;kali2023 靶机&#xff1a;win10 msf方法 首先是启动msf msfconsole 然后msf生成一个sh…

每日一题——LeetCode1460.通过翻转子数组使两个数组相等

方法一 哈希Map 用两个Map集合分别统计target和arr里出现的元素和出现的次数&#xff0c;在比较两个Map集合看是否出现的元素和次数都相同 var canBeEqual function(target, arr) {let map1 new Map();let map2 new Map();for (let item of target) {map1.set(item, (map1…

2.18号c++

1.菱形继承 1.1 概念 菱形继承又称为钻石继承&#xff0c;是由公共基类派生出多个中间子类&#xff0c;又由多个中间子类共同派生出汇聚子类。汇聚子类会得到多份中间子类从公共基类继承下来的数据成员&#xff0c;会造成空间浪费&#xff0c;没有必要。 问题&#xff1a; …

洛夫克拉夫特“克苏鲁神话”艺术风格探索(二)

三、多元的叙事风格 洛夫克拉夫特的克苏鲁神话作为当时独特的文学创造&#xff0c;有独特的叙事特征[8]。 一是侦探小说不稳定的叙事。最有名气的早期侦探小说是爱伦坡的《莫格街凶杀案》&#xff0c;并产生了“疑案”的经典设定&#xff0c;两次世界大战期间的侦探小说批评认…

【超级干货】ArcGIS_空间连接_工具详解

帮助里对空间连接的解释&#xff1a; 根据空间关系将一个要素的属性连接到另一个要素。 目标要素和来自连接要素的被连接属性写入到输出要素类。 如上图所示&#xff0c;关键在于空间关系&#xff0c;只有当两个要素存在空间关系的时候&#xff0c;空间连接才有用武之地。 一…

【.NET Core】深入理解async 和 await 理解

【.NET Core】深入理解async 和 await 理解 文章目录 【.NET Core】深入理解async 和 await 理解一、概述二、async异步执行机制理解三、async与await应用3.1 async与await简单应用3.2 带有返回值async与await应用 四、async和await中常见问题总结4.1 当方法用async标识时&…

C++初阶(十三) 模板

一、非类型模板参数 模板参数分类类型形参与非类型形参。类型形参即&#xff1a;出现在模板参数列表中&#xff0c;跟在class或者typename之类的参数类型名称。非类型形参&#xff0c;就是用一个常量作为类(函数)模板的一个参数&#xff0c;在类(函数)模板中可将该参数当成常量…

mysql 2-18

加密与解密函数 其他函数 聚合函数 三者效率 GROUP BY HAVING WHERE和HAVING的区别 子查询 单行子查询和多行子查询 单行比较操作符 多行比较操作符 把平均工资生成的结果当成一个新表 相关子查询 EXISTS 一条数据的存储过程 标识符命名规则 创建数据库 MYSQL的数据类型 创建表…

人工智能专题:2024亚太地区生成式人工智能应用与监管报告

今天分享的是人工智能系列深度研究报告&#xff1a;《人工智能专题&#xff1a;2024亚太地区生成式人工智能应用与监管报告》。 &#xff08;报告出品方&#xff1a;德勤&#xff09; 报告共计&#xff1a;20页 来源&#xff1a;人工智能学派 知识更新&#xff1a;了解传统…

按键控制LED和光敏传感器控制蜂鸣器

按键控制LED 把两个按键分别接在PB11、PB1上面&#xff0c;两个LED接在PA1和PA2上面 main.c#include "stm32f10x.h" // Device header #include "Delay.h" #include "LED.h" #include "Key.h"uint8_t keynum; //全局…

激光跟踪仪|6D跟踪仪测量大尺寸空间姿态

标题理解激光跟踪仪的工作原理与应用 激光跟踪仪基于激光干涉和测距原理&#xff0c;通过发射和接收激光束来实现对目标物体的跟踪和测量。它是将激光照射到接触测量目标物的目标&#xff08;使用反射器等&#xff09;上&#xff0c;然后经目标反射的激光返回发光源&#xff0…