Node.js和Vue的安装与配置(超详细步骤)

news2025/2/27 2:10:17

目录

    • 一、下载
    • 二、安装
    • 三、配置
    • 四、安装配置vue
    • 五、构建运行Vue项目

一、下载

Node.js官网下载
大家根据自己的系统进行下载安装包(我的电脑是windows10-64位,所以下载第一个)
在这里插入图片描述

二、安装

点击下载的安装包进行安装
在这里插入图片描述
点击Next
在这里插入图片描述

打勾并点击Next
在这里插入图片描述
默认安装路径是C:\Program Files\nodejs\,我这里选择在D:\Program Files\nodejs\目录下安装,点击Next
在这里插入图片描述
点击Next
在这里插入图片描述

点击Next
在这里插入图片描述

点击Install
在这里插入图片描述
安装完成点击Finish
在这里插入图片描述
安装完成后Node.js会自动将node配置到环境变量中,我们打开Windows的cmd窗口输入node -v,查看node版本
在这里插入图片描述
输入npm -v,看到npm版本
在这里插入图片描述

三、配置

在cmd窗口输入npm root -g,查看全局安装的模块所在目录
在这里插入图片描述
在安装的目录下新建两个文件夹node_cache和node_global
在这里插入图片描述
打开cmd命令窗口,配置全局安装的模块路径(注意"D:\Program Files\nodejs\node_global"是我电脑上的安装路径,你们以自己电脑实际安装路径进行替换)
npm config set prefix “D:\Program Files\nodejs\node_global”
在这里插入图片描述

配置缓存路径(注意路径)
npm config set cache “D:\Program Files\nodejs\node_cache”
在这里插入图片描述

在cmd窗口输入npm root -g,即可看见全局安装的模块路径已经切换成我们配置的路径了
在这里插入图片描述
为了之后使用npm下载东西时速度快一些,需要配置镜像站,这里选择淘宝镜像,打开cmd输入

npm config set registry=http://registry.npm.taobao.org

在这里插入图片描述
输入npm config get registry,输出http://registry.npm.taobao.org/即表示配置成功
在这里插入图片描述

现在配置一下Node.js的环境变量,设置环境变量的目的是在任何目录都可以执行node和vue命令。
windows10可以使用搜索功能搜索环境变量,点击编辑系统环境变量
在这里插入图片描述
点击环境变量
在这里插入图片描述
找到Path,点击编辑
在这里插入图片描述
点击新建,我电脑的node_global路径是"D:\Program Files\nodejs\node_global",配置完成后点击确定,关闭环境变量配置的所有窗口
在这里插入图片描述

四、安装配置vue

输入npm info vue,查看是否能够获取vue信息,这里报下图的错误话需要使用windows PowerShell管理员模式
在这里插入图片描述
右键左下角的windows图标选择windows PowerShell(管理员),输入npm info vue即可
在这里插入图片描述
在这里插入图片描述
输入npm install vue -g 开始安装vue
在这里插入图片描述
输入npm i @vue/cli -g 开始安装Vue-cli脚手架
在这里插入图片描述

五、构建运行Vue项目

我在D盘创建了一个demo目录,在命令行使用cd D:\demo进入到了demo目录,准备构建第一个vue项目
在这里插入图片描述
输入vue create first,出现下面的提示,让选择创建Vue3还是Vue2的项目,我这里选择Vue3直接回车
(注意这里可能出现“vue : 无法加载文件 D:\Program Files\nodejs\node_global\vue.ps1,因为在此系统上禁止运行脚本。”的问题,解决方案请参考我的这篇文章https://blog.csdn.net/qq_35156196/article/details/127576640?spm=1001.2014.3001.5502)
在这里插入图片描述
这张图片是vue项目已经构建好了
在这里插入图片描述
输入cd first,再输入npm run serve,即可成功运行vue项目
在这里插入图片描述
打开浏览器输入http://localhost:8080/即可访问vue的页面了
在这里插入图片描述

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

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

相关文章

vue3 路由的使用

路由的使用 在传统的 Web 开发过程中,当需要实现多个站内页面时,以前需要写很多个 HTML 页面,然后通过 标签来实现互相跳转。在如今工程化模式下的前端开发,像 Vue 工程,可以轻松实现只用一个 HTML 文件,…

JavaScript:实现复制粘贴剪切功能

文章目录js实现复制粘贴功能方式一:原生方式实现复制粘贴剪切(不推荐)方式二:浏览器自带clipboard API实现复制粘贴(推荐)简介特点clipboard对象及相关APIClipboard.readText()Clipboard.read()Clipboard.w…

iframe标签的使用

iframe标签的使用1、什么是iframe2、iframe的元素属性3、iframe操作4、iframe 对象及属性5、创建iframe元素6、iframe之间的通信6.1、什么是主域名,什么是子域名(拓展)6.2、iframe之间的通信7、其他7.1、iframe自适应7.2、防嵌套网页7.2.1、浏览器端7.2.2、服务器端…

使用HBuilderX软件快速搭建Vue项目

1.node.js环境下载 node.js相当于java中jdk,但是是在服务器端的 JavaScript,需要通过npm去管理node.js的包,通过npm可以下载node.js中的扩展 ①首先下载node.js的安装包 https://nodejs.org/zh-cn/download/releases/(以往版本) ②选择node.js的下载路径配置环境变量(一般会…

5分钟带你看懂 prettier + eslint 搭配(vscode)

最近身边不少朋友在用eslint和prettier搭配的时候,总是遇到一些莫名其妙的报错,自己也不知道怎么配,所以我总结了一下自己搭配的步骤,分享一下,如有不对之处,静请诸位大佬雅正! 本文按顺序配置一…

轻松实现在web页面中直接播放rtsp视频流

轻松实现在web页面中直接播放rtsp视频流写在前面实现介绍如何使用准备ffmpeg运行rtsp2web参数说明前端代码参数说明课外知识写在前面 我之前研究在 web 中直接播放 rtsp 视频流时,写过一篇文章:【前端】rtsp 与 rtmp 视频流的播放方法。阅读 这篇文章 对…

vue3 props属性基本使用梳理

前言 vue2中props属性的使用是比较统一的基本就一种方式,但是vue3中其实方式是比较多的,因此就打算梳理一下。 会按照选项式和组合式进行梳理,包括属性的定义、取值以及属性的监听。 应该是叫单文件组件和组合式API,不知道vue官…

在vscode中创建vue项目

1. 背景 昨天对一次成功用新电脑在vscode上跑成功项目工程里的vue项目,今天目标是自己用vscode新建一个vue项目 关于vue环境配置请看这篇:使用vscode运行Vue项目 2. 准备工作(也可跳过此步骤) 安装Vetur,一款Vue代码…

unplugin-auto-import的使用

1、unplugin-auto-import插件的解决的问题unplugin-auto-import 这个插件是为了解决在开发中的导入问题,比如经常不清楚相对路径的问题,这个插件就是解决这个问题这个插件会在根目录生成一个auto-import.d.ts,这个文件会将所有的插件导入到gl…

node.js安装及环境配置(保姆级)

一.node安装 1.去node官网安装Node.js 2.官网界面 3.无脑下一步,完成安装。(最好放在d盘) 4.安装完成之后管理员cmd查看是否安装成功,出现如下界面说明已经安装成功 5.打开Node文件目录,如下图: 6.在Node文件目录下建…

你评论,我赠书~【哈士奇赠书 - 12期】-〖爬虫逆向进阶实战〗参与评论,即可有机获得

大家好,我是 哈士奇 ,一位工作了十年的"技术混子", 致力于为开发者赋能的UP主, 目前正在运营着 TFS_CLUB社区。 💬 人生格言:优于别人,并不高贵,真正的高贵应该是优于过去的自己。💬 &#x1f4e…

Vue Grid Layout -️ 适用Vue.js的栅格布局系统(保姆级使用教程)

目录 一、 Vue Grid Layout 简介 二、vue-grid-layout 的安装与使用 三、 属性 3.1 gridItem 的必须属性 3.2 框架元素的实际宽度高度计算方式 3.3 gridLayout 的属性 四、事件 五、vue-grid-layout 的实际应用 5.1 移动到任意位置 5.2 移动事件与调整大小 5.3 实现…

Vue显示图片的几种方式

前言 最近在做自己的项目,有这么一个需求,用户列表需要展示用户的头像,之前一直没有处理,趁着这次机会,正好分享下我的解决过程。 头像这一栏空荡荡的,我这种强迫症患者难受死! 首先声明下&am…

vue面试题整理(2022-持续更新中...)

vue中MVVM的理解 M:模型(Model):数据模型;负责数据存储。泛指后端进行的各种业务逻辑处理和数据操控,主要围绕数据库系统展开。 V就是:View 视图: 负责页面展示,也就是用…

IDEA使用vue的安装与配置(详细教程)

在idea中使用vue首先idea的配置以及环境要搭建好,然后就按照以下操作进行就可以!(注:我使用的idea是2021.1.3 版本) 第一步 去官网下载node.js ,官网地址:https://nodejs.org/en/ 然后进行安装&#xff0…

封装一个uniapp的全局弹窗组件,vue中也可以使用,在任何页面都可以弹出

效果图: 场景: 当你对接websocket时,或者轮询也好,你需要获取到最新的信息,并且在任何页面弹出一个组件进行后续操作 思路: 1、先封装好要弹出的公共组件 2、向vue原型上挂载全局方法,拿到组件真…

VUE2安装步骤

一、node.js安装和配置 1.安装前,先看看自己电脑上有没有node.js 打开命令提示符,尽量选择管理员身份打开,或者按winR,输入cmd打开也行 打开后输入node -v 查看自己电脑是否安装node,以及版本号 node -v 我这里显示v…

vsCode中vue文件无法提示html标签

铅笔头课堂,有态度的前端培训 今天有同学问到老师:“ 老师,我的vue文件里书写html代码不提示了 ”,这个问题别说还真有点冷门,老师研究了一番之后终于妥善修复了这个问题,这里就将处理结果记录下来&#xf…

如何部署WebSpoon9.0.0(Kettle的Web版本)

前言 Kettle 是小有名气的开源ETL工具,现已改名为PDI(Pentaho Data Integration),其Web版本为:WebSpoon,本文记录了从官方Git仓库中拉取代码并成功运行的过程。 一、在本地拉取并编译项目 参考来源&#…

基于Echarts实现可视化数据大屏大数据可视化

前言 🚀 基于 Echarts 实现可视化数据大屏响应式展示效果的源码,,基于htmlcssjavascriptecharts制作, 可以在此基础上重新开发。 本项目中使用的是echarts图表库,ECharts 提供了常规的折线图、柱状图、散点图、饼图、K线图&…