0x00 NPM是什么

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

0x01 NPM安装

傻瓜式的安装。

第一步:打开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去下载了。

0x02 NPM安装包

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

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

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

0x03 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的文件。

0x04 NPM安装模块

使用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文件会发现:

0x05 下载不同版本的模块

npm install jquery@2.0.1 --save

0x06 卸载模块

npm uninstall jquery --save

0x07 使用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学习笔记(九)vue-cli中的组件通信

    前言 在上一篇博客vue学习笔记(八)组件校验&通信中,我们学会了vue中组件的校验和父组件向子组件传递信息以及子组件通知父组件(父子组件通信),上一篇博客也提到那是对组件内容的刚刚开始,而本 ...

  2. 014 Vue学习笔记1----Vue及Node、NPM

    1.前端开发模式的发展过程 (1)静态页面 最初的网页以HTML为主,是纯静态的网页.网页是只读的,信息流只能从服务端到客户端单向流通.开发人员也只关心页面的样式和内容即可. (2)异步刷新,操作DO ...

  3. Vue学习笔记之Nodejs入门

    0x00 前言 打开Nodejs英文网:https://nodejs.org/en/ 中文网:http://nodejs.cn/ 我们会发现这样一句话: 翻译成中文如下: Node.js 是一个基于 ...

  4. vue学习笔记(十)路由

    前言 在上一篇博客vue学习笔记(九)vue-cli中的组件通信内容中,我们学习组件通信的相关内容和进行了一些组件通信的小练习,相信大家已经掌握了vue-cli中的组件通信,而本篇博客将会带你更上一层 ...

  5. Vue学习笔记-Vue.js-2.X 学习(四)===>脚手架Vue-CLI(基本工作和创建)

    (五) 脚手架Vue-CLI 一 Vue-CLI前提(nodejs和webpack) 二  Vue学习-nodejs按装配置,Node.js 就是运行在服务端的 JavaScript. 1. 去nod ...

  6. Vue学习笔记-Vue.js-2.X 学习(三)===>组件化高级

    (四) 组件化高级 1.插槽(slot)的基本使用 A:基本使用: <slot></slot> B:默认置:<slot><h1>中间可以放默认值< ...

  7. Vue学习笔记-Vue.js-2.X 学习(二)===>组件化开发

    ===重点重点开始 ========================== (三) 组件化开发 1.创建组件构造器: Vue.extends() 2.注册组件: Vue.component() 3.使用 ...

  8. Vue学习笔记-Vue.js-2.X 学习(一)===>基本知识学习

    一  使用环境: windows 7 64位操作系统 二  IDE:VSCode/PyCharm 三  Vue.js官网: https://cn.vuejs.org/ 四  下载安装引用 方式1:直接 ...

  9. Vue学习笔记-vue-element-admin 按装报错再按装

    一  使用环境 开发系统: windows 后端IDE: PyCharm 前端IDE: VSCode 数据库: msyql,navicat 编程语言: python3.7  (Windows x86- ...

随机推荐

  1. PyQt4开关按钮ToggleButton

    PyQt4没有开关按钮部件.但是我们可以使用在特殊状态下的QPushButton部件来创建开关按钮.而所谓的开关按钮就是一个具有按下和未按下两种状态的普通赶牛.用户可以通过单击按钮来切换其开或者关的状 ...

  2. hadoop错误各种原因

    NoRouteToHostException 错误描述: INFO hdfs.DFSClient: Exception in createBlockOutputStream java.net.NoRo ...

  3. 跳表 SkipList

    跳表是平衡树的一种替代的数据结构,和红黑树不同,跳表对树的平衡的实现是基于一种随机化的算法,这样就使得跳表的插入和删除的工作比较简单.     跳表是一种复杂的链表,在简单链表的节点信息之上又增加了额 ...

  4. vscode新建html,没有模板

    首先,在文件夹下右击--新建--index.html 输入! 按tab键 完成!

  5. linux下有趣的几个命令

    1.时常我们将频繁使用的‘ls’命令打成‘sl’,那就使用一下sl这个命令吧.在我们敲错的时候,肯定会会心一笑. 安装: yum install sl -y 或 apt-get install sl ...

  6. fping命令测试主机存活

    author:headsen  chen date: 2018-10-09 20:11:22 1,测试一个范围内的主机: fping  -a  -g 192.168.1.1 192.168.1.255 ...

  7. MySQL命令行基本命令操作

    进入命令模式后, 显示所有数据库 show databases; 选定某个数据库 use 数据库名; 创建数据库 create database 数据库名; 删除数据库 drop table 数据库名 ...

  8. ThinkPHP分类查询(获取当前分类的子分类,获取父分类,下一级分类)

    获取指定分类的所有子分类ID号 //获取指定分类的所有子分类ID号 function getAllChildcateIds($categoryID){ //初始化ID数组 $array[] = $ca ...

  9. Redis连接(二)

    Redis 命令 Redis 命令用于在 redis 服务上执行操作. 要在 redis 服务上执行命令需要一个 redis 客户端.Redis 客户端在我们之前下载的的 redis 的安装包中. 语 ...

  10. MVC之LayOut布局页

    LayOut布局页,就是相当于WebForm中母版页,实现了一个代码的共用和公共布局的作用. 布局页的使用 (1)添加新项,选择MVC布局页 <!DOCTYPE html> <htm ...