在无网络的环境下,nodejs安装及vue-cli脚手架搭建

记录在没有网络或者内网环境下,安装vue开发环境。
本文版本:node

nodejs安装及vue-cli脚手架搭建

nodejs安装

1.准备
在可以连接外网的电脑,下载自己电脑对应版本的nodejs安装包
官网下载
下载成功后,将安装包拷贝到没有网络的电脑运行,一路下一步(安装目录可自行修改,本人安装目录:F:\Program Files\nodejs)。
安装完成后,先进行下简单的测试安装是否成功了,后面还要进行环境配置
在键盘按下【win+R】键,输入cmd,然后回车,打开cmd窗口

--查看node和npm的版本
node -v
npm -v

在这里插入图片描述
安装完后的目录如下图所示:
在这里插入图片描述
安装完成无node_global和node_cache文件夹
2.进行环境配置
(1)在我安装的【F:\Program Files\nodejs】文件夹下,创建两个文件夹【node_global】及【node_cache】如上图。
创建完两个空文件夹之后,打开cmd命令窗口,输入

npm config set prefix "F:\Program Files\nodejs\node_global"
npm config set cache "F:\Program Files\nodejs\node_cache"

(2)接下来设置环境变量,关闭cmd窗口,“我的电脑”-右键-“属性”
在这里插入图片描述
新建系统变量【NODE_PATH】
在这里插入图片描述
添加系统变量【Path】
在这里插入图片描述
如果有就不添加
检查用户变量(如果没有就添加)
在这里插入图片描述
在这里nodejs基本安装完成。

vue-cli脚手架搭建

1.准备
外网环境下安装vue-cli脚手架

npm install -g @vue/cli
npm install -g webpack
npm install -g webpack-cli
npm install -g yarn
npm install -g typescript

并查看npm全局安装包的存放目录

npm config get cache

在这里插入图片描述
复制【F:\Program Files\nodejs\node_cache】和【F:\Program Files\nodejs\node_global】文件夹下node_cache和node_global文件到无网络电脑。
2.在无网络电脑上面安装拷贝的nodejs安装包,并配置相同环境。
将node_cache和node_global文件替换成外网电脑的文件夹。
3.查看全局命令是否正常
npm list -global --depth 0
在这里插入图片描述
如上图:说明vue-cli脚手架安装成功
4.运行项目
在网上下载一个vue项目,cmd运行进入项目如下图
(1)在拉下来的本地项目路径下输入npm install 命令安装项目所需要的一些包文件(node_modules文件,如下图)
在这里插入图片描述
运行成功生成node_modules文件夹
在这里插入图片描述

(2)还是在项目路径下输入命令 npm run serve 运行项目
在这里插入图片描述
(3)运行成功访问该网址
可以在浏览器访问下面网址
Local: http://localhost:8080
Network: http://10.20.32.25:8080
(4)异常记录
当运行(1)步出现以下异常
在这里插入图片描述
解决方法:
1)将有网的电脑上安装并运行成功vue项目的nodejs拷贝到无网络的电脑安装地址如图(nodejs为拷贝的文件夹)
在这里插入图片描述
2)将在有网的电脑把vue项目运行npm install命令的项目,拷贝到无网络电脑,直接运行npm run serve命令,成功
3)依次运行完下面代码,然后运行npm install命令,成功,亲测可用。

npm config set registry https://registry.npmjs.org/ 
npm config set proxy null  // proxy:外部请求的代理
npm config set https-proxy null  // https-proxy:用于代理https请求的
npm config set strict-ssl false//--偶尔不用运行

C:\Users\kaycee_yu(个人电脑名称不同)文件下的.npmrc文件
在这里插入图片描述
以上方法只能运行别人创建的Vue项目,无法自己创建Vue项目,欢迎大家有好的方法可以在评论区留言,相互学习。

常用命令:

//查看npm全局安装包的存放目录
npm config get cache
//查看npm全局安装目录
npm root -g
//查看全局命令是否正常 
npm list -global --depth 0
//查看版本
vue -V
//打开Vue客户端
vue ui
  • 5
    点赞
  • 62
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 2
    评论
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

susan花雨

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值