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.mzph.cn/news/696279.shtml

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

相关文章

Golang 中 NATS JetStream 的高级特性有哪些?

NATS JetStream 是 NATS 消息系统的一个高级功能模块,提供了许多高级特性,使得它在处理消息时更加灵活、可靠和高效。以下是 NATS JetStream 的一些高级特性: 持久化消息存储:NATS JetStream 使用持久化存储引擎,可以确…

代码随想录三刷day06

提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档 文章目录 前言一、力扣203. 移除链表元素二、力扣707. 设计链表三、力扣 前言 递归法相对抽象一些,但是其实和双指针法是一样的逻辑,同样是当cur为空的…

机器学习面试:逻辑回归与朴素贝叶斯区别

逻辑回归与朴素贝叶斯区别有以下几个方面: (1)逻辑回归是判别模型,朴素贝叶斯是生成模型,所以生成和判别的所有区别它们都有。 (2)朴素贝叶斯属于贝叶斯,逻辑回归是最大似然,两种概率哲学间的区别。 (3)朴素贝叶斯需要条件独立假设…

【刷题】牛客 JZ64 求1+2+3+...+n

刷题 题目描述思路一 (暴力递归版)思路二 (妙用内存版)思路三 (快速乘法版)思路四 (构造巧解版)Thanks♪(・ω・)ノ谢谢阅读!&#xff01…

力扣49.字母异位词分组

题目描述: 49. 字母异位词分组 难度 中等 给你一个字符串数组,请你将 字母异位词 组合在一起。可以按任意顺序返回结果列表。 字母异位词 是由重新排列源单词的所有字母得到的一个新单词。 示例 1: 输入: strs ["eat", "tea"…

在Linux中查找大文件

在Linux中查找大文件,你可以使用find命令结合其他工具(如sort和du)来实现。以下是一些常见的方法: 1. 使用find命令查找大文件 你可以使用find命令来查找特定大小以上的文件。例如,要查找当前目录及其子目录中大小超…

高盛:日本这轮通胀是否可持续,关键看房租

租金在日本CPI中的权重高达20%,高盛预计短期内租金将继续拖累通胀至1.7%或以下,长期有望温和上行,使通胀稳在2%的水平。 日本正在转向“去通缩”,房租能否支撑通胀态势? 在日股今年一路高歌、有望“收复失地”时&…

redis的AOF机制

Redis AOF(Append Only File)机制是为了记录每一次redis命令的操作并用于恢复数据。 AOF按顺序记录每一步操作,例如: set k 3, set k 5, set k 10 ,当服务器重启后依次执行命令恢复k 10。 日志写入有三种方式: Always&#x…

【【深入浅出的了解从算法到RTL的基本流程】】

深入浅出的了解从算法到RTL的基本流程 首先 明确需求 ,明确题目 接下来是第一轮建模-------目的是 验证算法的正确性 这个阶段分为以下两个方面 一方面是 : 通过一些算法仿真工具来对 这个设计进行建模 — 算法原理建模 第二方面是 : 是 算…

hbase最新版本配置属性

1. 说明 hbase的配置属性大全 hbase版本基于 hbase-3.0.0-alpha-4 <?xml version"1.0"?> <?xml-stylesheet type"text/xsl" href"configuration.xsl"?> <!-- /*** Licensed to the Apache Software Foundation (ASF) under…

unity-firebase-Analytics分析库对接后数据不显示原因,及最终解决方法

自己记录一下unity对接了 FirebaseAnalytics.unitypackage&#xff08;基于 firebase_unity_sdk_10.3.0 版本&#xff09; 库后&#xff0c;数据不显示的原因及最终显示解决方法&#xff1a; 1. 代码问题&#xff08;有可能是代码写的问题&#xff0c;正确的代码如下&#xff…

OpenTiny Vue 组件库适配微前端可能遇到的4个问题

本文由体验技术团队 TinyVue 项目成员岑灌铭同学创作。 前言 微前端是一种多个团队通过独立发布功能的方式来共同构建现代化 web 应用的技术手段及方法策略&#xff0c;每个应用可以选择不同的技术栈&#xff0c;独立开发、独立部署。 TinyVue组件库的跨技术栈能力与微前端十…

springboot207基于springboot的实习管理系统

实习管理系统的设计与实现 摘要 近年来&#xff0c;信息化管理行业的不断兴起&#xff0c;使得人们的日常生活越来越离不开计算机和互联网技术。首先&#xff0c;根据收集到的用户需求分析&#xff0c;对设计系统有一个初步的认识与了解&#xff0c;确定实习管理系统的总体功…

H5星空渐变效果引导页源码

H5星空渐变效果引导页源码 源码介绍&#xff1a;H5星空渐变效果引导页源码是一款带有星空渐变效果的源码&#xff0c;内含3个可跳转旗下站点按钮。 下载地址&#xff1a; https://www.changyouzuhao.cn/8344.html

【海贼王的数据航海:利用数据结构成为数据海洋的霸主】时间复杂度 | 空间复杂度

目录 1 -> 算法效率 1.1 -> 如何衡量一个算法的好坏&#xff1f; 1.2 -> 算法的复杂度 2 -> 时间复杂度 2.1 -> 时间复杂度的概念 2.2 -> 大O的渐进表示法 2.3 -> 常见时间复杂度计算 3 -> 空间复杂度 4 -> 常见复杂度对比 1 -> 算法效…

nginx前缀匹配

nginx location ^~ /task/ { # 这样&#xff0c;当您访问 http://hostname:port/task/test 时&#xff0c;# 请求会被转发到 proxy_pass /test&#xff0c;注意 /task/ 前缀在转发时被去掉了。proxy_pass http://192.168.86.199:8805/; proxy_set_header Host $host; proxy…

SQL注入漏洞解析

什么是SQL注入 原理&#xff1a; SQL注入即是指web应用程序对用户输入数据的合法性没有判断或过滤不严&#xff0c;攻击者可以在web应用程序中事先定义好的查询语句的结尾上添加额外的SQL语句&#xff0c;在管理员不知情的情况下实现非法操作&#xff0c;以此来实现欺骗数据库服…

Ps下载安装(专业图像处理软件Ps安装包下载2024【Windows版】)

Adobe全家桶下载方式 将持续更新~ 文章目录 Adobe全家桶下载方式Ps下载方式【点我获取下载链接】我们的网站一、Ps简介声明 Ps下载方式【点我获取下载链接】 迅雷网盘下载&#xff1a;迅雷网盘下载方式百度网盘下载&#xff1a;百度网盘下载方式夸克网盘下载&#xff1a;夸克…

【Vuforia+Unity】AR01实现单张多张图片识别产生对应数字内容

1.官网注册 Home | Engine Developer Portal 2.下载插件SDK&#xff0c;导入Unity 3.官网创建数据库上传图片&#xff0c;官网处理成数据 下载好导入Unity&#xff01; 下载好导入Unity&#xff01; 下载好导入Unity&#xff01; 下载好导入Unity&#xff01; 4.在Unity设…

图——最小生成树实现(Kruskal算法,prime算法)

目录 预备知识&#xff1a; 最小生成树概念&#xff1a; Kruskal算法&#xff1a; 代码实现如下&#xff1a; 测试&#xff1a; Prime算法 &#xff1a; 代码实现如下&#xff1a; 测试&#xff1a; 结语&#xff1a; 预备知识&#xff1a; 连通图&#xff1a;在无向图…