Vue3-win7搭建vue3环境

Vue3-win7搭建vue3环境

官方要求的信息是是node.js 18.03以上。而我的环境:win7 x64, vscode 1.34。

参考网址:

0、基本的安装
https://blog.csdn.net/m0_49139268/article/details/126159171
a、这里有各种安装包的下载路径(镜像)
https://blog.csdn.net/yangchangfu2016/article/details/138476607
b、这里提供了npm应该升级到哪个版本,并且提供了安装pnpm包的思路,但是我没使用;
https://blog.csdn.net/FeiChang27/article/details/136499241
c、安装和启动第一个项目
https://www.runoob.com/vue3/vue3-install.html

安装Node.js

下载和安装:

在这里插入图片描述

在网址上没有找到压缩包,所以下载了一个安装包:node-v13.14.0-x64.msi。
除了上面那个官网的网址,也可以在这里下载,这是国内的镜像,同时这里还有各个版本的压缩包。
https://registry.npmmirror.com/-/binary/node/v13.14.0/node-v13.14.0-x64.msi
安装到路径:D:\dev\nodejs下。
安装的过程中,有一个 勾选框 ,大概内容是,自动安装相关依赖,我没有勾选。
按照文档提示,安装好以后新建了两个目录:node_cache和node_global,如下图所示:
在这里插入图片描述

配置环境变量:

在用户的path里面增加:node_global的全路径和nodejs的安装路径:D:\dev\nodejs\node_global;D:\dev\nodejs
在环境标量中新建NODE_PATH,变量值为:D:\dev\nodejs\node_global\node_modules。
为此,在node_global目录下我又新建了一个node-modules目录。

测试:

打开命令行输入命令,如下图所示:

在这里插入图片描述

设置npm的registry(注册表)

因为我本地的是win7版本太低,所以安装会报错,所以改成将npm的register设置成新的镜像。(参考网址:https://blog.csdn.net/No_Name_Cao_Ni_Mei/article/details/135816328)
npm config set registry http://registry.npmmirror.com
手动修改npm的registry,我的路径是C:\Users\Administrator.npmrc 。 在命令行输入命令npm -h 会提示配置文件的位置,如下图所示:
在这里插入图片描述

恢复官方网址:npm config set registry https://registry.npmjs.org
查看设置是否成功:npm config get registry

#重点来了:升级node和npm

目的是将被不能安装在win7上的版本安装到win7上。
下载https://registry.npmmirror.com/-/binary/node/v16.3.0/node-v16.3.0-win-x64.zip
先删除nodejs安装根目录下所有文件,复制16.3.0版本的所有文件直接替换nodejs的安装根目录 。替换完成后,进入cmd,通过node -v 和 npm -v 查看node.js 和 npm版本。会提示如下图所示错误说明覆盖成功,接着操作。
在这里插入图片描述

新增系统环境变量:变量名:NODE_SKIP_PLATFORM_CHECK,变量值:1
在这里插入图片描述

下载node-v19.0.0-win-x86.zip解压后,先删除nodejs安装根目录下所有文件,复制19.0.0版本的所有文件直接替换nodejs的安装根目录 。替换完成后,进入cmd,通过node -v 和 npm -v 查看node.js 和 npm版本。
网址:https://registry.npmmirror.com/-/binary/node/latest-v19.x/node-v19.0.0-win-x86.zip

升级npm:

截止到(2024年8月25日)如果升级到最新的,会报错,提示需要node在20版本以上。没有测试用20版本的覆盖是否能够在win7上安装,因为我计划下一步直接安装win10的虚拟机,一步到位,方便省心。但是吧,好不容在win7上安装成功了,记下来才安心,毕竟也是心血。
此时我参考了上面的第二个网址,看到npm可以升级到9.6.3,于是执行下面的命令升级:
npm install npm@9.6.3 -g

创建vue项目

参考了网址c:https://www.runoob.com/vue3/vue3-install.html
因为本地是win7所有没敢安装太高的版本,所以安装了3.1.0的环境。
npm init vue@3.1.0
然后输入项目名称:runoob-vue3-test ,其他的默认回车了,因为是测试项目。成功以后按照提示先后输入:
cd runoob-vue3-test
npm install
npm run dev
在这里插入图片描述
在这里插入图片描述

输入 :npm run dev以后,根据屏幕提示,在网址上输入:http://localhost:3000 就可以打开测试项目了。
在这里插入图片描述
在这里插入图片描述

中间的hello world! 是我自己改的。
参考:https://code.visualstudio.com/docs/nodejs/vuejs-tutorial,
在项目目录下,用命令行输入下面命令成功用vscode打开vue项目。
“code .”
在这里插入图片描述

此时,在vscode中修改内容在网页上是能够体现出来的。
大体完成。

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

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

相关文章

FedoSSL

题目:《Towards Unbiased Training in Federated Open-world Semi-supervised》 来源:ICML2023 注意比较与 ORCA 的区别 Abstract 联邦半监督学习(FedSSL)已经成为一种新范式,允许分布式客户端在稀缺的标记数据和丰富…

chapter08-面向对象编程(重写)day09

目录 302-方法重写介绍 303-方法重写细节 304-方法重写课堂练习1 305-方法重写课堂练习2 302-方法重写介绍 本类有这个方法就调用本类的,没有就向父类查找 303-方法重写细节 子类的形参列表、方法名称要和父类完全一致子类的返回类型(String&#x…

【Hot100】LeetCode—200. 岛屿数量

目录 1- 思路DFS 深搜 2- 实现⭐200. 岛屿数量——题解思路 3- ACM 思路 题目连接:200. 岛屿数量 1- 思路 DFS 深搜 在遍历中对 res 结果进行 操作 。遇到一个陆地结果为 1 的地方, 就将他们直接填充为 0 思路 ① 先遍历,收集 res② 之后…

LTSPICE使用教程:入门指导

1.常用快捷键 1.鼠标左键选择,鼠标右键取消,F7移动元器件 2.空格键:最大化显示 3.旋转:CtrlR 4.撤销:F9 5.删除:F5 6.退出编辑状态:ESC 7.元器件的镜像:Ctrle 8.原理图页面和…

viewBinding的使用(android studio)

引入 在开发安卓软件的时候,我们会大量的使用点击事件。通常情况下,我们是这样做的:将在xml文件里把目标组件添加id属性,如下: 然后在activity里面通过findViewById(R.id.back) 得到一个对象,通过对象调用…

mac和windows上安装nvm管理node版本

NVM 是 node version manager 的缩写,它是一个用来管理电脑上 node 版本的命令行工具,在日常前端开发中是一个跟 node 一样会经常用到的工具,可以很方便的让我们快速切换不同的node版本。 mac 上安装 nvm 1、下载安装 nvm 下载安装可以直…

Facebook的区块链战略:如何在社交媒体中实现去中心化

随着区块链技术的发展,Facebook(现Meta)正积极探索如何将这一技术整合进其社交平台中,以提升用户体验和数据安全。区块链技术以去中心化、透明性和不可篡改性为特点,为社交媒体带来了新的可能性。本文将探讨Facebook在…

在VB.net中,LINQ有什么方法与属性

标题 在VB.net中,LINQ有什么方法与属性 正文 在VB.NET中使用LINQ(Language Integrated Query),你可以利用一系列的方法和属性来查询和操作内存中的集合(如数组、列表等)以及数据库等数据源。LINQ提供了丰富…

OpenGL笔记二十之深度检测概念

OpenGL笔记二十之深度检测概念 —— 2024-08-25 晚上 bilibili赵新政老师的教程看后笔记 code review! 文章目录 OpenGL笔记二十之深度检测概念1.课程PPT截图2.运行3.代码 1.课程PPT截图 2.运行 3.代码 关键部分 main.cpp #include <iostream>#include "glfra…

【学习笔记】STM32F407探索者HAL库开发(三)IO分配

【学习笔记】STM32F407探索者HAL库开发&#xff08;三&#xff09;IO分配 1 STM32F407 IO资源分配表2 STM32F407ZGT6 引脚定义3 IO分配的重要性3.1 硬件设计优化3.2 软件编程3.3 系统性能提升 4 F1/F7/H7芯片的IO分配差异4.1 引脚数量和分组4.2 功能模式4.2.1 输入模式4.2.2 输…

7-6 分段函数2

计算分段函数&#xff0c;测试数据分别是-1、5、12。 输入格式: 输入一个数。 输出格式: 直接输出保留6位小数的结果&#xff0c;没有其它任何附加字符&#xff0c;没有宽度控制。 输入样例: 11输出样例: 0.999912输入样例: 7输出样例: 8.000000 #include <stdio.h…

java之类和对象2

封装的概念&#xff1a;将数据和操作数据的方法进行有机结合&#xff0c;隐藏对象的属性和实现细节&#xff0c;仅对外公开接口来和对象进行 交互 。&#xff08;主要通过类和访问权限符进行封装&#xff09; 访问权限符的介绍&#xff1a; public:相同/不同包中的子类/非子类…

足球规则指南,快速入门一看就懂

保姆级足球规则指南&#xff0c;旨在帮助初学者快速入门&#xff0c;一看就懂。以下是精简而全面的指南&#xff1a; 一、比赛场地与球员 场地&#xff1a;足球比赛在长方形场地上进行&#xff0c;长度为101米&#xff0c;宽度为64米。场地两端设有球门&#xff0c;高2.44米&…

【git bash编码错误解决方案】启动conda环境时报错,其他terminal却正常

&#x1f50e;嘿&#xff0c;这里是慰慰&#x1f469;&#x1f3fb;‍&#x1f393;&#xff0c;会发各种类型的文章&#xff0c;智能专业&#xff0c;从事前端&#x1f43e; &#x1f389;如果有帮助的话&#xff0c;就点个赞叭&#xff0c;让我开心一下&#xff01;&#x1f…

2024网络安全学习路线 非常详细 推荐学习

关键词&#xff1a;网络安全入门、渗透测试学习、零基础学安全、网络安全学习路线 首先咱们聊聊&#xff0c;学习网络安全方向通常会有哪些问题 1、打基础时间太长 学基础花费很长时间&#xff0c;光语言都有几门&#xff0c;有些人会倒在学习 linux 系统及命令的路上&#…

MacOS安装 Python 和 PyCharm

MacOS安装 Python3.12.5 和 PyCharm 小阿呜有话说一、MacOS安装PythonPython官网下载 二、MacOS安装PyCharmPyCharm官网下载 叮嘟&#xff01;这里是小啊呜的学习课程资料整理。好记性不如烂笔头&#xff0c;今天也是努力进步的一天。一起加油进阶吧&#xff01; 小阿呜有话说 …

CR80清洁卡:一款磁卡读卡设备广泛适用的清洁利器!

CR80清洁卡&#xff0c;专为磁卡读卡设备设计&#xff0c;是一款高效且广泛适用的清洁工具。CR80是国际标准中定义的卡片尺寸&#xff0c;即长85.60mm、宽53.98mm&#xff0c;这种尺寸的卡片广泛应用于身份证、银行卡、门禁卡、会员卡等多种场合。因此&#xff0c;CR80清洁卡特…

【PyQt】切换界面的实现

前言一、介绍二、代码2.1 QStackedWidget2.1.1 代码2.1.2 运行结果展示 2.2 QTabWidget2.2.1 代码2.2.2 运行结果展示 2.3 QDockWidget2.3.1 代码2.3.2 运行结果展示 PULSE结果 总结 前言 实现几个界面的切换展示的效果。 一、介绍 在 PyQt 中实现一个主界面包含其他子界面的…

Vue3 获取农历(阴历)日期,并封装日历展示组件

前言&#xff1a;哈喽&#xff0c;大家好&#xff0c;我是码喽的自我修养&#xff01;今天给大家分享vue3项目中使用 chinese-lunar-calendar 插件获取农历(阴历)日期&#xff0c;并封装了日历展示组件&#xff01;提供了具体的代码帮助大家深入理解&#xff0c;彻底掌握&#…

【SpringBoot】11 多数据源(MyBatis:dynamic-datasource)

介绍 多数据源&#xff1a;指的是一个单一应用程序中涉及了两个及以上的数据库&#xff0c;这种配置允许应用程序根据业务需求灵活地管理和操作不同的数据库。 需求 一个应用服务中&#xff0c;连接多个数据库&#xff0c;有本地的也有远程的&#xff0c;有MysQL、Oracle、P…