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

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

Unity中,C#的事件与委托区别和经典实例

文章目录 实例1:委托(Delegate)的基本用法实例2:事件(Event)的声明与订阅实例3:Unity引擎中的委托实例 - UI Button.onClick实例4:事件(Event)的安全性实例5&…

上位机图像处理和嵌入式模块部署(cmake的使用)

【 声明:版权所有,欢迎转载,请勿用于商业用途。 联系信箱:feixiaoxing 163.com】 过去我们编写windows程序的时候,习惯上都是直接使用visual studio创建工程开发。而开发linux程序的时候,则是编写好c、cpp代…

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

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

无形的伤害

有时候 我们往往很注意和陌生人或朋友之间的交往,关注情绪,语气,声调等等,生怕冲撞唐突了对方。 但往往会忽略身边人的感受,尤其是亲人和亲密的朋友,把他们对我们的关心当做理所当然的,和他们交…

Sora技术和影响分析

与现有生成工具比的优势 现有的文生图工具有Midjourney、Stable Diffusion、文心一格等,支持不同风格的内容生成,支持lora模型训练,此领域发展相对比较成熟。 而在文生视频领域,其难度相对更高,要求画面连续、清晰度…

OpenMVG(特征匹配、照片组重建点云、GPS位置信息、GMS)

目录 1 图像的特征匹配 2 图像中提取GPS位置信息 2.1 写入GPS信息到图像中 2.2 读取带有GPS的图像 3 SIFT/AKAZE/AKAZE_MLDB特征提取对比 4 GMS Filter 5 将球形全景图转换为6个透视视图 6 照片组重建点云 1 图像的特征匹配 #include "openMVG/features/feature.…

BUGKU-WEB source

题目描述 题目截图如下: 进入场景看看: 解题思路 看源码,看F12网络请求没有东西只能老老实实按照提示用Linux去扫描目录 相关工具 kali虚拟机安装gobuster 或者dirsearch 解题步骤 先查看源码: flag{Zmxhz19ub3RfaGvyzS…

Ubuntu22.04LTS编译Frida历史版本,环境配制及细节调整

经常使用Frida的朋友们可能会遇到Frida的各种问题需要自定义的,而这时候Frida的本地编译就显得很重要了。 最近一位朋友发现使用Frida14/15/16版的server只能连拉一定数量的设备,超过了frida-device-manager便不能连接设备。 实现没有办法,…

vue创建项目报:Error: command failed: yarn

我的文件在:C:\Users\Administrator 下 原来里面 useTaobaoRegistry 是否使用淘宝源 是 false ,我改为true就好了 也可以 packageManager 默认安装工具 改为 npm 或 cnpm 原文连接:vue创建项目报:Error: command failed: yarn-阿…

Stable Diffusion教程——常用插件安装与测试(一)

前言 随着Stable Diffusion不断演进,越来越多的开发者开始涉足插件开发。尽管网络上存在大量教程,但它们通常零散分布,逐个学习和查找非常耗时,使人感觉每天都在劳累思考。这里总结了Stable Diffusion常用的插件安装与测试方法。…

搭建智能调度系统:同城代驾小程序的开发教学

当下,同城代驾服务越来越受到人们的青睐。为了满足市场需求,许多企业开始开发智能调度系统,以提高服务效率和用户体验。本文将介绍如何搭建一个智能调度系统,并以同城代驾小程序的开发为例进行详细教学。 第一步:需求…

科技守护大唐遗宝,预防保护传承千年

​ 一、“大唐遗宝——何家村窖藏出土文物展” 陕西历史博物馆的“唐朝遗宝——何家村窖藏出土文物展”算得上是博物馆展览的典范。展览不仅在于展现了数量之多、等级之高、种类之全,更在于对唐朝历史文化的深入揭露。 走入大唐财产展厅,好像穿越千年前…

The Captainz NFT 概览与数据分析

作者:stellafootprint.network 编译:cicifootprint.network 数据源:The Captainz NFT Collection Dashboard The Captainz 是 Memeland 的旗舰系列,由 9,999 个实用性极强的 PFP 组成。持有者在 Memeland 宇宙中展开了一场神…

【Python】测量WAV文件播放时长

问题 windows播放WAV音频文件,一般使用API函数,如PlaySound。实际使用发现,从调用PlaySound到实际开始播放存在200ms以上的延时,在游戏编程中音效实时性是个需要解决的问题。 本文主要讨论,windows播放WAV文件的衍生…

2024 VNCTF----misc---sqlshark sql盲注+流量分析

流量分析 wireshark 可以看到很多 any/**/Or/**/(iF(((((Ord(sUbstr((sElect(grOup_cOncat(password))frOm(users)) frOm 1 fOr 1))))in(80))),1,0))# P any/**/Or/**/(iF(((((Ord(sUbstr((sElect(grOup_cOncat(password))frOm(users)) frOm 1 fOr 1))))in(104))),1,0))#…

基于springboot智慧外贸平台源码和论文

网络的广泛应用给生活带来了十分的便利。所以把智慧外贸管理与现在网络相结合,利用java技术建设智慧外贸平台,实现智慧外贸的信息化。则对于进一步提高智慧外贸管理发展,丰富智慧外贸管理经验能起到不少的促进作用。 智慧外贸平台能够通过互…

Vue3

目录 一、 Vue3简介 1. 性能的提升 2. 源码的升级 3. 拥抱TypeScript 4. 新的特性 二、 创建Vue3工程 1. 基于 vue-cli 创建 2. 基于 vite 创建(推荐) 3. 一个简单的效果 三、Vue3核心语法 1. OptionsAPI 与 CompositionAPI (1)Options API …

前端vue金额用逗号分隔

实现效果 代码 template部分 <el-input v-model"state.val"></el-input><div>{{ priceFor(state.val) }}</div> js部分 const state reactive({ val: });const priceFor (val)> {if(!val){return }else if(val.length<4){return…

IP定位技术助力网络安全保护

随着网络技术的不断发展&#xff0c;网络安全问题日益凸显&#xff0c;如何有效保护网络安全已成为亟待解决的问题。IP定位技术作为一种前沿的网络安全防护手段&#xff0c;正在逐步成为网络安全保护的重要工具。 首先&#xff0c;我们要明确什么是IP定位技术。IP定位技术是一…

Instagram 账号被封如何申诉?ins账号解封经验分享

不知道各位在玩转海外社媒平台时有没有遇到过Instagram账号异常的情况&#xff0c;比如会出现账号受限、帖子发不出去、账号被封号等情况?Instagram账号如果被封不用马上弃用&#xff0c;我们可以先尝试一下申诉&#xff0c;看看能不能把账号解封。所以今天将会出一篇Instagra…