vue.js中的npm安装教程图

首先，明确nodejs和npm的关系；

Node.js是一个javascript运行环境，封装了Google V8引擎。是服务器端的javascript解释器。

包含关系：nodejs包含npm。比如安装nodejs，可以打开cmd，输入npm -v，会发现npm的版本号，表示已经安装了npm。

引用大神：的总结

实际上，npm是nodejs的包管理器。我们在Node.js上开发的时候，会用到很多别人写的javascript代码。如果我们需要别人的代码，我们会按名字搜索，下载源代码，解压后重用，会很麻烦。然后是包管理器npm。每个人都上传他们的书面源代码到npm官方网站。如果您想使用其中的一个或一些，您可以直接通过npm安装它们，而不管源代码在哪里。而如果我们要使用依赖于模块b，模块b依赖于模块c和模块d的模块a，那么npm会根据依赖关系下载并管理所有的依赖包。想象一下，如果所有这些工作都由我们自己来做，那该有多麻烦！

Node -v查看节点的版本，并具有内置的包管理器，该包管理器包含用于安装依赖包的npm。

npm安装-g类型脚本

首先，在使用之前，让我们掌握三样东西是用来做什么的。

npm: Nodejs下的包管理器。web pack k :的主要目的是通过CommonJS的语法准备所有需要在浏览器端发布的静态资源，比如合并和打包资源。Vue-cli:用户生成Vue工程模板。(帮你快速启动一个vue项目，就是给你一套vue结构，包括基本的依赖库，只有npm安装才能安装)启动：

如图所示，下载8.9.3 LTS(推荐大多数用户)

双击安装

您可以使用默认路径，在本例中该路径被修改为d:\nodejs

一路指向下一个

单击“完成”完成

打开CMD，检查是否正常

再看另外两个目录，npm的本地仓库运行在系统盘C的用户目录中(npm-cache没有被看到，因为它还没有被使用，缓存目录一使用就生成)。我们尝试将这两个目录移回D:\nodejs，首先建立如下所示的两个目录。

然后运行以下两个命令：NPM配置集前缀' d: \ nodejs \ node _ global' NPM配置集缓存' d: \ nodejs \ node _ cache '

如上图，让我们再次关注npm的本地仓库，进入命令npm列表-全局

输入命令npmconfig设置注册表=http://registry.npm.taobao.org来配置镜像站

投入

命令npm配置列表显示所有配置信息，我们关注一个配置文件c : \ users \ administrator \ . NPM RC。

用文本编辑器编辑，就可以看到刚才的配置信息

检查镜像站。命令1 npm配置获取注册表

检查镜像站是否可以命令2个Npm信息vue，看看你是否可以获得vue的信息

请注意，此时，默认模块D:\nodejs\node_modules目录将更改为d : \ nodejs \ node _ global \ node _ modules目录，如果直接运行npm install等命令，将会报告错误。我们需要做一件事：1。添加环境变量NODE _ PATH:d : \ nodejs \ NODE _ global \ NODE _ modules

(请注意，您需要重新打开CMD才能使上述环境变量生效。)首先，测试NPM install vue.js命令：npm install vue -g这里-g指的是安装到全局全局目录。

其次，测试npm安装vue-router命令：NPM安装vue-router -g。

运行npm安装vue-cli -g以安装vue脚手架

编辑环境编辑路径

将D:\nodejs\node_global win10以下的版本添加到PATH环境变量中，水平显示路径。注意不要有分号[；】

重新打开CMD，测试vue是否正常工作

注意vue-cli工具的内置模板，包括webpack和webpack-simple。前者是一个复杂而专业的项目，其配置并不全在webpack.config.js根目录下。

初始化，安装依赖项

运行npm安装安装依赖项

npm运行开发

成功界面，提示打开地址http://localhost:8080

自动打开浏览器http://localhost:8080/#/

通过npm运行构建生成静态文件，并在nmp下打开新创建的vue01的目录描述，在dist文件夹下打开新生成的index.html文件：

摘要

以上是边肖介绍的vue.js中npm安装教程的图解，希望对大家有所帮助。如果你有任何问题，请给我留言，边肖会及时回复你。非常感谢您对我们网站的支持！