npm vue安装,npm构建vue,vue.js中npm安装教程图解

npm vue安装,npm构建vue,vue.js中npm安装教程图解

本文主要介绍了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安装,不管源代码在哪里。而如果我们要使用模块A,而模块A依赖于模块B,模块B依赖于模块C和D,那么npm会根据依赖关系下载并管理所有的依赖包。想象一下,如果这些工作都由我们自己来做,那该有多麻烦!

node -v

查看

node

版本,内置包含

npm

包管理器来安装依赖包。

npm install -g类型脚本

一、在使用之前,我们先掌握三样东西是用来做什么的。

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

如图,下载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 list -global。

输入命令NPM配置集注册表=3358registry.npm.taobao.org来配置镜像站。

投入

命令npm config list显示所有的配置信息,我们主要关注配置文件C:UsersAdministrator.npmrc。

用文本编辑器编辑一下,就可以看到刚才的配置信息了。

检查镜像站是否可以命令1 npm config get registry。

检查镜像站是否可以命令2 Npm info vue,看是否可以获取vue信息。

注意,此时默认的模块D:nodejsnode_modules目录将改为D: nodejs node _ global node _ modules目录。如果直接运行npm install之类的命令,将会出现错误。我们需要做一件事:1。添加环境变量NODE_PATH。内容是:D: nodejs node _ global node _ modules

(注意,下一步操作需要重新打开CMD才能使上述环境变量生效。) 1.测试NPM安装vue.js命令:npm install vue -g这里-g表示安装到全局全局目录。

二、测试NPM安装vue-router 命令:npm install vue-router -g

运行npm install vue-cli -g来安装vue脚手架。

编辑环境编辑路径

在PATH环境变量中添加D:nodejsnode_global win10或以下版本,路径横向显示。注意不要有分号[;】

再次打开CMD,测试vue是否正常工作。

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

初始化,安装依赖项

运行npm install来安装依赖项。

npm运行开发

接口成功,提示打开地址http://localhost:8080

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

nprunbuild生成一个静态文件,打开dist文件夹下新生成的index.html文件和nmp下新创建的vue01的目录描述:

总结

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

npm vue安装,npm构建vue,vue.js中npm安装教程图解