Vue安装及环境配置详细教程

一、下载node.js

访问node.js官网:Download | Node.js

选择Windows Installer (.msi)的64-bit进行下载。

在E盘新建一个文件夹,取名为nodejs,也可以在其他盘符新建。

在安装node.js时,点击Change...,进行切换盘符安装。我这里就选择E:\nodejs\,然后点击Next。

这里不需要选择或更换,默认安装,直接Next即可。

不需要勾选,直接Next。后面选择Install进行安装。

二、配置npm相关文件

打开刚才安装node.js的文件夹,在里面新建两个文件夹,分别为node_global和node_cache

安装Win+R,打开命令提示符,输入以下命令,防止报错的话可以以管理员方式运行下面所有的命令。

npm config set prefix "E:\nodejs\node_global"
npm config set cache "E:\nodejs\node_cache"
npm install express -g
npm list -global

前三行命令执行完之后,再次查看node_global和node_cache就可以发现文件夹里面有内容了,已经成功进行了加载。下面是执行命令前后npm list -global下的截图。

这是执行命令后node_global下使用npm list -global

接下来还需要配置淘宝镜像,继续输入以下命令。

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

但默认打开命令提示符的话可能会因为权限不足导致npm安装可能会报错,报错如下。

这个是报的npm安装权限的问题,关于这个问题有两个解决方法。

解决方法一:用管理员身份运行cmd,就可以成功用npm安装

解决方法二:删除.npmrc文件

该文件在:C:\Users(用户)\用户名\.npmrc。一般这种类型的文件都是默认被隐藏,需要打开隐藏查看。这里选择第一种以管理员方式运行,因为删去.npmrc文件之前的配置也会恢复到初始状态,不然就白做了。

重新打开命令提示符,再次输入npm config set registry=http://registry.npm.taobao.org和npm config list命令,可以看到已经成功配置好,不再报错。

三、配置npm相关环境

打开编辑系统环境变量,将用户变量和系统变量都添加上两行内容

E:nodejs\node_global
E:nodejs\node_cache

然后是系统变量新建一个NODE_PATH的变量,存放的值如下。

E:nodejs\node_global\node_modules

四、配置vue相关文件

这里先安装webpack模板,输入以下命令进行安装。

npm install webpack -g
npm install --global webpack-cli

之后再输入以下命令进行安装vue相关文件。

npm install vue -g   //安装vue.js
npm install vue-router -g   //安装vue-router
npm install vue-cli -g   //安装vue脚手架

安装完后的node_global文件夹。

输入vue -V查看vue安装版本,如果成功显示版本号说明安装vue成功。

C:\Windows\System32>vue -V
2.9.6

五、新建并启动vue2项目

接着就是创建vue2项目,输入以下命令。

e:   //最好不要在C盘创建vue项目
cd vue_code
vue init webpack 项目名

当出现# Project initialization finished!说明vue2项目已经创建完毕,再次执行以下命令。

cd ymh
npm run dev

执行后,显示我们创建的项目现在在本地的8080端口,直接复制url到浏览器进行访问就可以查看我们新建的vue2项目。

vue2项目页面显示如下,到这步我们的vue2项目就创建好了。

如果需要终止项目运行,按住ctrl+c,在选择Y进行停止即可。除此启动命令就是上面的npm run dev。

终止批处理操作吗(Y/N)? Y

六、新建并启动vue3项目

新建vue3文件夹,输入以下命令。

e:
cd vue3
npm install @vue/cli

执行npm install @vue/cli后显示的界面。

安装后进入node_modules下的.bin目录,将原本的vue和vue.cmd重命名,命名如下。

新建系统环境变量如下。

然后再将用户变量和系统变量都新添加环境变量%vue_cli3%。

在命令提示符输入vue3 -V,查看目前vue版本。

接着输入以下命令进行创建vue3项目。

e:
cd vue3
vue3 create 项目名

默认选择第一个Vue 3创建,然后直接回车。

这里创建需要等待几分钟,等到出现以下界面,说明已经创建成功。

输入以下命令。

cd ymh3
npm run serve

复制路径到浏览器进行运行。

到这里vue3项目也成功运行好了,和vue2项目页面还有会有些不同的。

vue3项目的运行停止也是同上面的vue2,ctrl+c,然后选择Y就可进行停止退出。希望能对大家有所帮助,也大家希望能多点点赞啥的,在这里先谢谢大家了。

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

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

相关文章

使用 STM32 微控制器读取光电传感器数据的实现方法

本文介绍了如何使用 STM32 微控制器读取光电传感器数据的实现方法。通过配置和使用STM32的GPIO和ADC功能,可以实时读取光电传感器的模拟信号并进行数字化处理。本文将介绍硬件连接和配置,以及示例代码,帮助开发者完成光电传感器数据的读取。 …

<JavaEE> 什么是线程安全?产生线程不安全的原因和处理方式

目录 一、线程安全的概念 二、线程不安全经典示例 三、线程不安全的原因和处理方式 3.1 线程的随机调度和抢占式执行 3.2 修改共享数据 3.3 关键代码或指令不是“原子”的 3.4 内存可见性和指令重排序 四、Java标准库自带的线程安全类 一、线程安全的概念 线程安全是指…

无人机助力电力设备螺母缺销智能检测识别,python基于YOLOv7开发构建电力设备螺母缺销小目标检测识别系统

传统作业场景下电力设备的运维和维护都是人工来完成的,随着现代技术科技手段的不断发展,基于无人机航拍飞行的自动智能化电力设备问题检测成为了一种可行的手段,本文的核心内容就是基于YOLOv7来开发构建电力设备螺母缺销检测识别系统&#xf…

spark的安装与使用:一键自动安装

使用shell脚本一键下载、安装、配置spark(单机版) 1. 把下面的脚本复制保存为/tmp/install_spark.sh文件 #!/bin/bash# sprak安装版本 sprak_version"2.4.0" # sprak安装目录 sprak_installDir"/opt/module" # hadoop安装路径&…

【数组和函数实战: 斗地主游戏】

目录 1. 玩法说明 2. 分析和设计 3. 代码实现 4. 游戏演示1. 玩法说明 一副54张牌,3最小,两个王最大,其实是2,和上面一样从大到小排列 2. 分析和设计 2.1 分析和设计 常量和变量设计 一副牌有54张,有牌的数值和花色,可以分别用两个数组来存储,card为卡牌表示的数值,color为…

Java数据结构之《希尔排序》题目

一、前言: 这是怀化学院的:Java数据结构中的一道难度中等的一道编程题(此方法为博主自己研究,问题基本解决,若有bug欢迎下方评论提出意见,我会第一时间改进代码,谢谢!) 后面其他编程题只要我写完…

CGAL的四叉树、八叉树、正交树

四叉树(Quadtree):四叉树是一种用于二维空间分割的数据结构。它将一个二维区域划分为四个象限,每个象限进一步细分为四个小块,以此类推。四叉树可以用于空间索引、图形学、地理信息系统(GIS)等领…

前端打包添加前缀

vue2添加前缀 router的base加上前缀 export default new Router({mode: history, // 去掉url中的#base: privateDeployUrl, // 这里加上前缀scrollBehavior: () > ({y: 0}),routes: constantRoutes })vue.config.js,publicPath属性加上前缀 publicPath: proces…

Kali 修改IP地址和DNS 开启SSH和远程桌面

一、修和IP和DNS 1、打开配置文件 vim /etc/network/interfaces# 加入 auto eth0 iface eth0 inet static address 10.3.0.231 netmask 255.255.255.0 gateway 10.3.0.12、清空网卡配置 ip addr flush dev eth0 3、配置DNS vim /etc/resolv.confnameserver 114.114.114.11…

爬虫-xpath篇

1.xpath的基础语法 表达式描述nodename选中该元素/从根节点选取、或者是元素和元素间的过渡//从匹配选择的当前节点选择文档中的节点,而不考虑它们的位置.选取当前节点…选取当前节点的父节点选取属性text()选取文本 举例: 路径表达式结果html选择html元…

TLS协议握手流程

浅析 TLS(ECDHE)协议的握手流程(图解) - 知乎 前言 通过 wireshark 抓取 HTTPS 包,理解 TLS 1.2 安全通信协议的握手流程。 重点理解几个点: TLS 握手流程:通过 wireshark 抓取 HTTPS 包理解…

常用数据预处理方法 python

常用数据预处理方法 数据清洗缺失值处理示例删除缺失值插值法填充缺失值 异常值处理示例删除异常值替换异常值 数据类型转换示例数据类型转换在数据清洗过程中非常常见 重复值处理示例处理重复值是数据清洗的重要步骤 数据转换示例 数据集成示例数据集成是将多个数据源合并为一…

【网络协议】聊聊网络ReadTimeout和ConnectTimeout

在实际的开发中,网络超时是一个比较常见的问题,比如说针对支付系统,超时就需要进行和三方人员进行核对订单状态,是否人工介入处理。 但其实在设计网络框架的时候,一般都有两个超时参数 连接超时参数 ConnectTimeout&am…

vue项目node-sass^4.14.1 python gyp 报错解决办法

npm i node-sass4.14.1 --sass_binary_sitehttps://npm.taobao.org/mirrors/node-sass/参考链接:链接

LabVIEW在不同操作系统上使VI、可执行文件或安装程序

LabVIEW在不同操作系统上使VI、可执行文件或安装程序 LabVIEW可以在多个操作系统上运行,主要支持以下几种操作系统: Windows: LabVIEW在各个版本的Windows操作系统上都能运行,包括Windows 7、Windows 8和Windows10。LabVIEW为Wi…

elk:filebeat也是一个日志收集工具

filebeat是一个轻量级的日志收集工具,所使用的系统资源比logstash部署和启动使用的资源要小的多 filebeat可以允许在非java环境,他可以代替logstash在非java环境上收集日志 filebeat无法实现数据的过滤,一般是结合logstash的数据过滤功能一…

Safe and Practical GPU Computation in TrustZone论文阅读笔记

Safe and Practical GPU Computation in TrustZone 背景知识: youtube GR视频讲解链接:ASPLOS’22 - Session 2A - GPUReplay: A 50-KB GPU Stack for Client ML - YouTube GPU软件栈: 概念:"GPU软件栈"指的是与GPU硬件…

使用mybatis-plus框架:@Autowired报错Could not autowire. No beans of ‘XXX‘ type found

使用mybatis-plus框架,使用xxmapper报错: 解决办法是:在mapper中添加注解: Repository Mapper 也可以使用 AutowiredSysRoleMenuService sysRoleMenuService;替代 AutowiredSysRoleMenuMapper sysRoleMenuMapper;方法名不同,但…

处理和分析人类语言数据-NLTK安装和使用

简介:NLTK(Natural Language Toolkit)是一个强大的Python库,用于处理和分析人类语言数据,是一个开源的项目,包含:Python模块,数据集和教程,用于NLP的研究和开发&#xff…

Windows系统下Elasticsearch-7.15.2安装

一、环境 此次笔记使用的运行环境以及软件版本 系统:WIN10 JDK版本:1.8 Elasticsearch版本:7.15.2 elasticsearch-head版本:最新 IK分词器版本:7.15.2 Kibana版本:7.15.2 二、Elasticsearch基本知识 2.1 介绍…