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标准库自带的线程安全类 一、线程安全的概念 线程安全是指…

vue3高雅的使用useDialog

在Vue 3中,我们可以使用useDialog自定义指令来高雅地实现对话框的功能。以下是一个简单的示例: 首先,我们需要创建一个名为useDialog.js的文件,并在其中定义我们的自定义指令: // useDialog.js import { ref } from …

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

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

Android 13 - Media框架(21)- ACodec(三)

这一节我们将继续来学习 ACodec 的剩余部分。 enum {kFlagIsSecure 1,kFlagPushBlankBuffersToNativeWindowOnShutdown 2,kFlagIsGrallocUsageProtected 4,kFlagPreregisterMetadataBuffers 8,};enum {kVi…

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

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

测试类运行失败:TestEngine with ID ‘junit-jupiter‘ failed to discover tests

背景:原本我的项目是可以运行的,然后我用另外一台电脑拉了下来,也是可以用的,但是很奇怪,用着用着就不能用了。报了以下错误: /Library/Java/JavaVirtualMachines/openjdk-11.jdk/Contents/Home/bin/java …

org.springframework.security.crypto.bcrypt.BCryptPasswordEncoder 实现密码加密 验证 代码示例

BCryptPasswordEncoder 是 Spring Security 提供的用于加密和验证密码的实现类。它使用强大的 BCrypt 散列函数来存储密码的散列值,提供了一种安全的密码存储方法。以下是一个简单的示例代码,演示如何使用 BCryptPasswordEncoder 进行密码加密和验证&…

索引器【C#】

索引: 索引,索的是实例化的编号,派生的子类,第 [ N ] 个儿子。 用数组的方式访问实例。 返回的是实例的,一个属性值。 声明: this [ 索引 ] public string this[int index]{get{}set{}}pub…

idea 插件开发日志绑定问题

错误日志 Searchable options index builder completed SLF4J: Class path contains multiple SLF4J bindings. SLF4J: Found binding in [jar:file:/D:/gradle/caches/modules-2/files-2.1/com.jetbrains.intellij.idea/ideaIC/2021.2/b0727ceddea2b62b16825db9308e14a470198…

【QT5】QT5安装

QT5的安装 从软件开发的角度看,选择版本最新的稳定版是最佳选择,目前QT已经开发到QT6了,但是自从QT5最后一个版本QT5.15起,QT官方就不再提供离线安装包了,安装最新版本的QT除了要注册账号等麻烦的操作外,Q…

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

目录 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…

vue面试题整理(1.0)

一、对MVC,MVP,MVVM的理解 三者都是项目的架构模式(不是类的设计模式),即:一个项目的结构,如何分层,不同层负责不同的职责。 1.MVC MVC的出现是用在后端(全栈时代&…

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

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