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. Spring学习笔记--初始化和销毁Bean

    可以使用bean的init-method和destroy-method属性来初始化和销毁bean.定义一个Hero类: package com.moonlit.myspring; public cla ...

  2. JSON.parse()和JSON.stringfy()

    JSON.parse()从字符串中解析出JSON对象: var data = '{"a":1,"b":2}'; JSON.parse(data); JSON.s ...

  3. Runtime应用(二)使用对象关联为分类增加属性(每个对象的属性互不干扰)

    一.对象的关联方法有 1. void objc_setAssociatedObject(id object, const void *key, id value,objc_AssociationPol ...

  4. vs删除空行 —— 正则表达式以及其他

    \r:return 到当前行的最左边. \n: newline 向下移动一行,并不移动左右. 1. ^\s*\n               查找空行 2. ^\s*(?=\r?$)\n  查找空行即 ...

  5. AVL 平衡树

    AVL是一种平衡二叉树,它通过对二叉搜索树中的节点进行旋转使得二叉搜索树达到平衡.AVL在所有的平衡二叉搜索树中具有最高的平衡性. 定义 平衡二叉树或者为空树或者为满足如下性质的二叉搜索树: 左右子树 ...

  6. 【PHP】数字补零的两种方法

    在php中有两个函数,能够实现数字补零, str_pad() sprintf() 函数1 : str_pad 顾名思义这个函数是针对字符串来说的这个可以对指定的字符串填补任何其它的字符串 例如:str ...

  7. dialog里面数据更新问题

    在实际开发中经常会用到showDialog(int id)的方法来展示一个对话框,但是会遇到一个Dialog展示之后下次再show的时候对话框的界面还是上次展示的那个,而不是我们想象的界面.很多时候我 ...

  8. 腾讯云分布式高可靠消息队列CMQ架构

    版权声明:本文由张浩原创文章,转载请注明出处: 文章原文链接:https://www.qcloud.com/community/article/126 来源:腾云阁 https://www.qclou ...

  9. web图片100%宽度自适应,高度不塌陷

    一般在web端图片100%自适应,在页面加载的时候存在高度塌陷的问题 解决这个问题其实很简单,用padding-top设置百分比值来实现自适应,公式如下 padding-top = (Image He ...

  10. 第k最短路A*启发式搜索

    Remmarguts' Date Time Limit: 4000MS   Memory Limit: 65536K Total Submissions: 21549   Accepted: 5862 ...