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. vue-底部导航栏

    <template> <div class="bottom"> <div class="bottom_button iconfont ico ...

  2. 小程序js执行顺序

    底部tab 有 login/index    my/index   home/index 操作1>进 login/index 页面,  index.js加载以下方法 onLoad页面加载onSh ...

  3. ssm框架整合

    1.1 整合的思路 1.1.1 Dao层 使用mybatis框架.创建SqlMapConfig.xml.(可以是任意名字) 创建一个applicationContext-dao.xml   (通过sp ...

  4. 利用Python实现简单的相似图片搜索的教程

    大概五年前吧,我那时还在为一家约会网站做开发工作.他们是早期创业公司,但他们也开始拥有了一些稳定用户量.不像其他约会网站,这家公司向来以洁身自好为主要市场形象.它不是一个供你鬼混的网站——是让你能找到 ...

  5. Openresty 安装第三方插件

    Openresty 安装第三方插件 程序媛没有夜生活 2016.08.02 15:33* 字数 167 阅读 1283评论 0喜欢 2 在安装之前,我们先来看一下我们现有的模块. 1.将需要安装的插件 ...

  6. ntpdate 正确的做法

    网上很多搜到的资料都是过时的,主要是时间服务器不能用,不管是国内的还是国外的 1. yum -y install ntp ntpdate 2. 在/etc/crontab中,加入: 0 0 0 * 1 ...

  7. unittest多线程生成报告-----BeautifulReport

    原文地址https://www.cnblogs.com/yoyoketang/p/8404204.html 前言 selenium多线程跑用例,这个前面一篇已经解决了,如何生成一个测试报告这个是难点, ...

  8. 获取 Google USB 驱动程序

    获取 Google USB 驱动程序       另请参阅 安装 USB 驱动程序 使用硬件设备 使用任何 Google Nexus 设备进行 ADB 调试时,只有 Windows 需要 Google ...

  9. 关于设置cookie同源,axios请求加上cookie

    一个有cookie  一个没有 这是为啥!! axios都设置了的为true允许携带cookie 大佬答疑解惑:==>cookie同源域名才有啊,在Application看看cookie的pat ...

  10. StackExchange.Redis在net中使用

    redis 官网https://redis.io redis 下载  进入下载页面  https://redis.io/download https://github.com/MicrosoftArc ...