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中修改内容在网页上是能够体现出来的。

大体完成。

相关推荐
biyezuopinvip5 小时前
基于Spring Boot的企业网盘的设计与实现(任务书)
java·spring boot·后端·vue·ssm·任务书·企业网盘的设计与实现
陈振wx:zchen20085 小时前
JavaScript
javascript·js
biyezuopinvip11 小时前
基于Spring Boot的企业网盘的设计与实现(毕业论文)
java·spring boot·vue·毕业设计·论文·毕业论文·企业网盘的设计与实现
John_ToDebug1 天前
引擎深处的漫游者:构建浏览器JavaScript引擎的哲学与技艺
javascript·chrome·js
是梦终空1 天前
计算机毕业设计264—基于Springboot+Vue3+协同过滤的房屋租赁管理系统(源代码+数据库+万字论文+设计文档)
spring boot·毕业设计·vue3·课程设计·毕业论文·协同过滤·房屋租赁管理系统
Cult Of2 天前
Alicea Wind的个人网站开发日志(2)
开发语言·python·vue
Byron07073 天前
从多端割裂到体验统一:基于 Vue 生态的跨端架构落地实战
vue·多端
Irene19913 天前
通用消息组件 bug 修复及更好的实现是使用函数调用组件
vue3·函数调用·通用消息组件
计算机程序设计小李同学3 天前
基于 Spring Boot + Vue 的龙虾专营店管理系统的设计与实现
java·spring boot·后端·spring·vue
沐墨染3 天前
Vue实战:自动化研判报告组件的设计与实现
前端·javascript·信息可视化·数据分析·自动化·vue