您的位置:首页 > 房产 > 建筑 > Vue3-win7搭建vue3环境

Vue3-win7搭建vue3环境

2024/12/23 15:53:56 来源:https://blog.csdn.net/o396032767/article/details/141536666  浏览:    关键词: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中修改内容在网页上是能够体现出来的。
大体完成。

版权声明:

本网仅为发布的内容提供存储空间,不对发表、转载的内容提供任何形式的保证。凡本网注明“来源:XXX网络”的作品,均转载自其它媒体,著作权归作者所有,商业转载请联系作者获得授权,非商业转载请注明出处。

我们尊重并感谢每一位作者,均已注明文章来源和作者。如因作品内容、版权或其它问题,请及时与我们联系,联系邮箱:809451989@qq.com,投稿邮箱:809451989@qq.com