Nodejs安装详细步骤

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:\Users\LiRui\AppData\Roaming  查看是否有npm 和npm-cache两目目录;

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

执行命令:

npm config set prefix "C:\openSource\nodejs\node_global"

npm config set cache "C:\openSource\nodejs\node_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:\openSource\nodejs\node_modules

现在一顿操作之后就会改变为:C:\openSource\nodejs\node_global\node_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:\openSource\nodejs\node_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

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

总结:

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

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

发布了17 篇原创文章 · 获赞 6 · 访问量 3万+

猜你喜欢

转载自blog.csdn.net/keenstyle/article/details/86577297