NPM是什么?

简单的说,npm就是JavaScript的包管理工具。类似Java语法中的maven,gradle,python中的pip。

安装

傻瓜式的安装。

第一步:打开https://nodejs.org/en/

第二步:

第三步:我们为了统一版本,虽然node.js更新到了8.11.1的版本,但对于我个人而言,还是比较喜欢6.10.*版本的。

第四步:

第五步:点点点。为了避免环境变量出现额外的问题,winodows用户将nodejs统一安装在c盘中,mac电脑直接安装。

npm是和Nodejs一起并存的,只要安装了Nodejs,npm也安装好了,安装好Nodejs之后。打开终端,执行如下命令,检查是否安装成功

但是由于npm自身的更新频率比Node.js高很多,所以通过上面安装的npm可能不是最新版本,可以通过下面的命令单独更新npm。在这里不简易大家更新了。

针对mac电脑的用户,如果执行

会出现如下错误;

解决方案:只需要

ok,到目前为止,我们的软件都安装好了。

既然我们知道npm它能够管理我们的包,也就是我们所谓的模块。

那么,比如在之前我们使用到的jquery框架,bootstrap框架。都可以使用npm去下载了。

安装包

我们在桌面上创建一个文件夹/01-studyNpm。

注意:千万不要起名成:node、npm这样的文件夹,以免与系统软件产生不必要的冲突。

打开终端,切换到当前创建的文件夹目录下,一定是当前目录。

npm 初始化

在去下载包之前,首先先让当前项目的包进行初始化操作,执行命令:

npm init

运行这个命令后,它会询问一些关于包的基本信息,根据实际情况回答即可。如果不喜欢这种方式,可以使用npm init --yes命令直接使用默认的配置来创建package.json文件,最后根据需要修改创建好的package.json文件即可。

{
"name": "01-studynpm",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC"
}

主要字段的含义如下:

  • name: 模块名, 模块的名称有如下要求:

    • 全部小写
    • 只能是一个词语,没有空格
    • 允许使用破折号和下划线作为单词分隔符
  • version: 模块版本信息

  • description:关于模块功能的简单描述,如果这个字段为空的话,默认会从当前目录的READMD.mdREADME文件读取第一行内容作为它的默认值。

  • main: 模块被引入后,首先加载的文件,默认为index.js

  • scripts: 定义一些常用命令入口

关于最后一个英文的意思,我们可以证明,当我执行npm init之后,会自动的生成package.json的文件。

安装模块

使用npm install会读取package.json文件来安装模块。安装的模块分为两类
dependenciesdevDependencies,分别对应生产环境需要的安装包和开发环境需要的安装包。

同样在安装模块的时候,可以通过指定参数来修改package.json文件,以jquery和webpack做例子

npm install jquery --save

npm install webpack --save-dev

来将新安装的模块信息记录到package.json文件.

我们正式操作一遍,下载jquery包

npm install jquery --save

执行以上命令,便可以安装对应的包到执行命令的当前目录,并创建一个node_modules的文件夹,然后把需要安装的安装包下载到里面。

打开package.json文件会发现:

下载不同版本的模块

npm install jquery@2.0.1 --save

卸载模块

npm uninstall jquery --save

使用cnpm(淘宝镜像)

使用npm下载依赖时,由于是从国外的网站上下载内容,所以可能经常会出现不稳定的情况,所以需要下载cnpm代替npm,cnpm是国内淘宝的做的,在国内使用稳定。

1.下载cnpm

npm install -g cnpm --registry=https://registry.npm.taobao.org

2.使用cpm

cnpm install jquery --save

前端框架VUE----nodejs中npm的使用的更多相关文章

  1. 前端框架vue.js系列(9):Vue.extend、Vue.component与new Vue

    前端框架vue.js系列(9):Vue.extend.Vue.component与new Vue 本文链接:https://blog.csdn.net/zeping891103/article/det ...

  2. nodeJS中npm常见的命令

    常用的nodeJS中npm的命令:npm主要是node包管理和发布的工具.npm常用的命令:1:npm install <name> //(下载包) 下载后的包放在当前路径下面 npm i ...

  3. 前端框架VUE

    Vue Vue近几年来特别的受关注,三年前的时候angularJS霸占前端JS框架市场很长时间,接着react框架横空出世,因为它有一个特性是虚拟DOM,从性能上碾轧angularJS,这个时候,vu ...

  4. (转)2018几大主流的UI/JS框架——前端框架 [Vue.js(目前市场上的主流)]

    https://blog.csdn.net/hu_belif/article/details/81258961 2016年开始应该是互联网飞速发展的几年,同时也是Web前端开发非常火爆的一年,Web ...

  5. 可能是目前最完整的前端框架 Vue.js 全面介绍

    Vue.js 是一个JavaScriptMVVM库,是一套构建用户界面的渐进式框架. 摘要 2016年最火的前端框架当属Vue.js了,很多使用过vue的程序员这样评价它,“vue.js兼具angul ...

  6. 前端框架VUE——安装及初始化

    本篇文章适合,想要学习 vue,但对 vue 又没有接触过的同学阅读,是非常基础的内容.告诉大家使用 vue 时的安装方式,及如何创建实例,展示内容. 一.安装方式 vue 是一种前端框架,所以使用前 ...

  7. 从Java的角度理解前端框架,nodejs,reactjs,angularjs,requirejs,seajs

    [前端神秘的面纱] 对后端开发来说,前端是神秘的, 眼花缭乱的技术,繁多的框架, 如果你还停留在前端等于只用jquery做开发,那么你out了, 本文从Java的角度简述下目前前端流行的一些框架. 水 ...

  8. 前端框架 Vue 初探

    一.前言 前几日使用微信网页版时,好奇这个网页用了什么前端框架.用Chrome的开发人员模式一探到底,发现原来用了一个名叫 Angular 的框架.好吧,既然微信用了.那我也最好还是看看.等等,你这篇 ...

  9. 前端框架 vue 和 react 的区别

    前言:最近需要使用 react,以前用过 vue,故来总结两者的区别. 首先React与vue有几点相同之处 1.都使用了Virtual DOM 2.提供了响应式(Reactive)和组件化(Comp ...

  10. Nodejs中npm install 命令的问题

    在使用nodejs的npm包管理工具中碰到过许多个坑,在网上查了很久才解决,现在加以总结. 两种安装方式(本地安装,全局安装) 1.全局安装(npm install -g moduleName/npm ...

随机推荐

  1. 【LNMP】提示Nginx PHP “No input file specified”错误的解决办法

    原理: 任何对.php文件的请求,都简单地交给php-cgi去处理,但没有验证该php文件是否存在. PHP文件不存在,没办法返回普通的404错误,它返回 一个404,并带上一句”No input f ...

  2. 装系统w7、ubuntu、centos等系统(一)

    装w7系统准备 1.从老毛桃u盘启动盘制作工具_老毛桃u盘装系统_老毛桃pe_老毛桃官网下载装机版 2.一个正常使用的U盘,但容量大于4G,并且插入电脑保持连接 3.老毛桃装机版选择U盘启动-> ...

  3. 【LeetCode每天一题】Substring with Concatenation of All Words(具备列表中所有单词的字串)

    You are given a string, s, and a list of words, words, that are all of the same length. Find all sta ...

  4. windows下使用sed和tee命令

    最近需要在winowds slave上设置构建app和sdk,至于如何在windows slave上构建c/c++代码生成sdk(dll,lib之类)和apk(exe文件),请参考我的另外一篇博客,即 ...

  5. python安装pandas模块

    直接安装时报错了 localhost:~ ligaijiang$ pip3 install pandas Collecting pandas Downloading https://files.pyt ...

  6. [LeetCode] 系统刷题1_代码风格及边界

    代码风格 说自己不清楚的算法,比如KMP,如果解释不清楚或者写不出来的算法建议不提 注意代码的缩进以及空格的合理运用,使得代码看起来比较整洁有条理 注意边界的条件以及越界 误区: 算法想出来还仅仅不够 ...

  7. iOS UIViewController生命周期控制

    具体流程,看下图: init方法在init方法中实例化必要的对象(遵从LazyLoad思想)init方法中初始化ViewController本身 loadView方法当view需要被展示而它却是nil ...

  8. SWF加载器控件 SWFLoaderControl

    SWF加载器控件 书:165 <?xml version="1.0" encoding="utf-8"?> <s:Application xm ...

  9. springmvc注解式开发

    搭建环境 后端控制器无需实现接口,添加相应的注解 springmvc配置文件中无需注册controller springmvc配置文件中添加组件扫描器.注解驱动 涉及常用的注解 @controller ...

  10. Tomcat任意文件上传漏洞CVE-2017-12615

    文章来源:https://blog.csdn.net/qq1124794084/article/details/78044756 漏洞影响的tomcat版本为tomcat7.0.0-7.0.81版本 ...