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

大体完成。

相关推荐
加班是不可能的,除非双倍日工资6 小时前
css预编译器实现星空背景图
前端·css·vue3
我命由我123451 天前
软件开发 - 避免过多的 if-else 语句(使用策略模式、使用映射表、使用枚举、使用函数式编程)
java·开发语言·javascript·设计模式·java-ee·策略模式·js
尚学教辅学习资料1 天前
Vue3从入门到精通: 4.5 数据持久化与同步策略深度解析
vue·数据持久化
IT毕设实战小研2 天前
Java毕业设计选题推荐 |基于SpringBoot的健身爱好线上互动与打卡社交平台系统 互动打卡小程序系统
java·开发语言·vue.js·spring boot·vue·毕业设计·课程设计
第七种黄昏3 天前
大事件项目拆解:登录访问拦截实现详解
前端框架·vue·js
har01d4 天前
在 uniapp 里使用 unocss,vue3 + vite 项目
前端·uni-app·vue·uniapp·unocss
har01d5 天前
【CSS3】录音中。。。
前端·css·vue.js·vue·vue3·css3
柯北(jvxiao)5 天前
Vue vs React 多维度剖析: 哪一个更适合大型项目?
前端·vue·react
知识分享小能手5 天前
Vue3 学习教程,从入门到精通,Vue 3 + Tailwind CSS 全面知识点与案例详解(31)
前端·javascript·css·vue.js·学习·typescript·vue3
晓13136 天前
Vue2篇——第二章 Vue从指令修饰符到侦听器的全面解析(重点)
前端·javascript·vue