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

大体完成。

相关推荐
海天鹰2 天前
在线GPX编辑器gpx.studio
js
尾善爱看海2 天前
Vue 面试进阶篇:Composition API、插槽、自定义指令……8 个章节 + 高频面试题全解析
前端·javascript·vue.js·面试·vue
明耀2 天前
vue chart 强行刷新高度,宽度
vue
YWL2 天前
OpenLayers弹窗Overlay深度实战
前端·vue·openlayers
YWL2 天前
OpenLayers+ECharts联动:地图点击联动图表,数据可视化大屏方案
前端·信息可视化·vue·echarts·openlayers
YWL3 天前
OpenLayers地图分享:URL参数同步+分享链接生成,让用户一键分享地图视角
前端·javascript·vue·openlayers
尾善爱看海3 天前
前端面试算法手撕全解(高频真题+标准答案)
算法·js
程序员蜡笔熊4 天前
Vite 8 换芯实测:Rolldown 替掉双引擎,构建快 3.19 倍
前端·javascript·vue
YWL5 天前
OpenLayers导出功能:地图截图+GeoJSON导出完整方案,从Canvas合并到PDF生成
前端·vue·openlayers
上单带刀不带妹5 天前
小程序图片缓存问题:时间戳和版本号解决图片不更新
缓存·小程序·vue·uniapp