首页 > 编程知识 正文

node.js安装教程,nodejs安装包

时间:2023-05-05 06:10:58 阅读:245568 作者:4268

nodejs作为一个新兴的前端框架;安装步骤包含其他模块的安装内容;

正在挠头的我看到这位老兄的博客:https://www.cnblogs.com/goldlong/p/8027997.html   ;个人觉得分析很仔细,于是自己臭不要脸的“学习”了一下;

下载地址:https://nodejs.org/en/  进入页面,可以看到一个推荐本版,一个当前最新版本;大多数情况下建议选择推荐版本

 

 

点击安装之后就一路next就ok了,因为是直接安装,所以环境变量就直接被添加了。

 

 

 

 

 

安装完成之后,到安装目录能够查看到该文件结构;

完整包含模块notejs程序和包管理器

 

 

验证环境变量;

打开cmd命令输入命令:echo %path%

 

如果能看到安装的nodejs的路径,表示path环境变量设置ok

 

在输入命令:npm -v

如果能看待对应的版本号,安装ok!

 

 

这就表示环境变量还没有设置ok;就必须要设置环境变量;

 

 

 

虽然安装完毕,但是我们还有点小问题:

分别输入命令:node -v   和 npm -v 发现npm的版本不是最新的。

 

至于为什么版本不是最新的,还没有答案,如果有大神知道,还请告知!

 

 

到目录:C:UsersLiRuiAppDataRoaming  查看是否有npm 和npm-cache两目目录;

 

 

 

将这两个文件夹试图copy到nodejs安装目录;在安装目录新建node_global 和 node_cache两个目录

 

 

执行命令:

npm config set prefix "C:openSourcenodejsnode_global" npm config set cache "C:openSourcenodejsnode_cache"

 

npm list -global查看目录地址是否已经变化;

 

 

 

 

配置镜像站:npm config set registry=http://registry.npm.taobao.org

 

执行命令:npm config list 

 

查看cache、prefix、registry三个参数配置数据是否正确;

 

 

 

 

接下来找到配置文件所在:

 

 

进行编辑可以查看我们刚刚配置的信息;

 

 

查看镜像:

 

 

 

测试能否获得vue信息:

 

 

 

更新npm:

npm install npm -g

 

 

现在npm更新为6.6版本;

 

npm list -global

 

 

注:

之前安装是默认的模块是:C:openSourcenodejsnode_modules

现在一顿操作之后就会改变为:C:openSourcenodejsnode_globalnode_modules

如果我们现在直接运行npm install等命令会直接报错;

 

所以我们需要修改环境变量:

 

 

重新打开cmd命令行:npm install vue -g

 

vue.js安装完毕;

 

这里的npm install 是指安装命令; vue是模块 , -g是放在全局目录;

 

然后检查vue的安装位置:

这里的vue模块已经安装到了我们配置的新目录里面;

 

 

接下来我们测试npm 安装vue-router

执行命令:npm install vue-router -g

 

 

测试安装vue-cli  (vue脚手架)

执行命令:npm install vue-cli -g

 

 

现在发现输入:vue ;提示不是内部命令

 

 

 

这是因为C:openSourcenodejsnode_global目录不再环境变量中:

 

 

配置环境变量后,重新打开命令行执行命令:vue -V    注:-V是大写的V

 

 

ok正常了;

 

 

注意,vue-cli工具是内置了模板包括 webpack 和 webpack-simple,前者是比较复杂专业的项目, 他的配置并不全放在根目录下的 webpack.config.js 中。

 

切换到cmd根目录:vue init webpack vue01

 

安装途中有时会遇到突然不动了,敲下回车就可以了;

 

 

初始化,安装依赖

 

 

执行命令:npm run dev

 

 

 

 

访问网址:http://localhost:8080

 

 

生成静态文件:npm run build

 

 

 

 

 

这里还偷了大神一张图解释结构:

 

总结:

过程有些复杂,做完感觉还是没有什么难点,重要在于理解各个模块的功能;

环境变量哪里在更改了配置之后,需要记得一定要修改环境变量;

版权声明:该文观点仅代表作者本人。处理文章:请发送邮件至 三1五14八八95#扣扣.com 举报,一经查实,本站将立刻删除。