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,一经查实,立即删除!

相关文章

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

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

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

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

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

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

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

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

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

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

springboot207基于springboot的实习管理系统

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

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

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

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

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

SQL注入漏洞解析

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

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

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

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

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

Sora的第一波受害者出现了。

不知道大家最近除了被Sora刷屏之外,有没有被这张图刷屏 我只能说网友太强大了 说实话,我进入舟老师的直播间,每次都是还有3分钟下播,还有6单就拍完 但是10分钟后还在激情逼单,6单之后还有6单 也许在营销学上&#x…

C++笔记:OOP三大特性之多态

前言 本博客中的代码和解释都是在VS2019下的x86程序中进行的,涉及的指针都是 4 字节,如果要其他平台下测试,部分代码需要改动。比如:如果是x64程序,则需要考虑指针是8bytes问题等等。 文章目录 前言一、多态的概念二、…

【C++初阶】系统实现日期类

目录 一.运算符重载实现各个接口 1.小于 (d1)<> 2.等于 (d1d2) 3.小于等于&#xff08;d1<d2&#xff09; 4.大于&#xff08;d1>d2&#xff09; 5.大于等于&#xff08;d1>d2&#xff09; 6.不等于&#xff08;d1!d2&#xff09; 7.日期天数 (1) 算…

mac图片怎么转换格式jpg?四种高效方法助你轻松搞定JPG格式

mac图片怎么转换格式jpg&#xff1f;在数字时代&#xff0c;图片格式的转换成为了我们日常操作中的一项基本技能。特别是在使用Mac操作系统的用户中&#xff0c;如何将图片转换为JPG格式成为了一个热门话题。本文将为你详细介绍四种简单实用的方法&#xff0c;帮助你在Mac上轻松…

测试基础1:伟大航路哟呼(Linux基础、mysql基础)

1 测试流程和方法 软件测试定义&#xff1a; 从方式上看&#xff1a;包含人工测试、自动化测试 从方法上看&#xff1a;运行程序或系统和测定程序或系统的过程 从目的上看&#xff1a;包括找bug和找bug出现的原因 软件测试的原则&#xff1a;功能性、可靠性、易用性、效率性…

一、网络基础知识

1、IP地址和端口号 1.1、IP地址 定义&#xff1a;用于在网络中唯一标识设备的地址。格式&#xff1a;通常由四个数字组成&#xff0c;以点分十进制表示&#xff0c;例如&#xff1a;192.168.0.1。(IPv4)作用&#xff1a;允许网络中的设备相互通信&#xff0c;通过IP地址可以定…

Python 数据可视化之密度散点图 Density Scatter Plot

&#x1f349; CSDN 叶庭云&#xff1a;https://yetingyun.blog.csdn.net/ 密度散点图&#xff08;Density Scatter Plot&#xff09;&#xff0c;也称为密度点图或核密度估计散点图&#xff0c;是一种数据可视化技术&#xff0c;主要用于展示大量数据点在二维平面上的分布情况…

一样的代码不同项目跳转页面报404的解决办法

今天收到实施反馈的一个问题&#xff0c;点项目名称跳转项目详情页面时&#xff0c;有的页面跳转显示正常&#xff0c;有的页面跳转报404错误。错误如下&#xff1a; 发现报错的项目都有一个共性就是有特殊字符“[ ]” , 解决的办法就是把带有特殊字符的字段 用 encodeURI()…

【Django】Django自定义后台表单——对一个关联外键对象同时添加多个内容

以官方文档为例&#xff1a; 一个投票问题包含多个选项&#xff0c;基本的表单设计只能一个选项一个选项添加&#xff0c;效率较低&#xff0c;如何在表单设计中一次性添加多个关联选项&#xff1f; 示例代码&#xff1a; from django.contrib import adminfrom .models impo…