vue全家桶进阶之路4:NPM包
NPM(Node Package Manager)是 Node.js 的包管理工具,用来安装各种 Node.js 的扩展。
NPM是 JavaScript 的包管理工具,也是世界上最大的软件注册表。有超过 60 万个 JavaScript 代码包可供下载,每周下载约 30 亿次。NPM让 JavaScript 开发人员可以轻松地安装、使用、共享、分发代码,管理项目依赖项目。NPM是Node.js的默认管理工具,所以在安装Node.js的时候就已经包含了NPM。
Node.js是JavaScript运行环境,NPM是Node.js默认的包管理工具,所以安装了Node.js,NPM也就有了。
- 下载安装:Node.js 官网中文版:https://nodejs.org/zh-cn/
- 验证安装是否成功或查看版本:
- 查看Node.js版本方法:node -v
- 查看NPM的版本方法:npm -v

- 配置Node.js环境(NPM全局安装路径,可以自定义,按照默认设置也可以。)
- 默认安装位置:c:\Users\用户名\AppData\Roaming\npm
- 自定义位置:
- 例如:node的安装路径为D:\Program Files\nodejs
- 首先在node的安装目录下设置2个文件夹,node_global和node_cache
- 全局路径cmd命令:npm config set perfix "D:\Program Files\nodejs\node_global"
- 缓存路径cmd命令:npm config set cache"D:\Program Files\nodejs\node_cache"
- 设置环境变量
- 目的:任何目录下都可以使用NPM命令。
- 设置位置为:用户变量(当前用户可用)或系统变量(所有用户可用)
- 设置环境变量:在用户变量下新建NODE_PATH,变量值设置为全局路径npm config set perfix "D:\Program Files\nodejs\node_global
- 编辑用户变量下的path,新建并输入全局路径"D:\Program Files\nodejs\node_global
- NPM初始化项目
- 初始化动作在项目文件夹下进行,所以需要cmd进入到项目文件夹。例如:D:\BaiduSyncdisk\npm-demo1
- 自定义参数初始化命令:npm init,然后按照提示操作,最后y确认。
- 默认参数初始化命令:npm init -y,参数按照系统默认执行。
- 初始化完成后,目录下会生成一个package.json文件。
- 安装package.json两种的依赖包命令(此步骤取决于有无package里面有无设置依赖):npm install
- 安装模块(JS库)
- 本地安装:npm install 模块名
- @指明版本号:npm install bootstrap@3.4.1
- ^次要版本和小版本最新,大版本不变,3是大版本,4是次要版本,1是小版本。
- ~小版本最新,大版本和次要版本不变
- latest 安装最近
- 全局安装:npm install 模块名 -g
- 本地安装针对本项目,全局安全共同使用
- 查看npm模块的全局安装位置:npm root -g

查看所有全局安装的JS库:npm list -g 或者简写 npm ls -g

- 本地安装:npm install 模块名
- 生产环境依赖和开发环境依赖的安装
- 值得注意的是,依赖的安装是在项目下进行的,换言之,只有安装了依赖,你拿到的项目才能运行。
- 生产环境依赖在package.json中的位置:dependencies,简称dep
- 安装命令:npm install 模块名 --save, 或者npm install 模块名 --s,或者npm install 模块名 -S
- 开发环境依赖在package.json中的位置:devdependencies,简称dev
- 安装命令:npm install 模块名 --save-dev, 或者npm install 模块名 -D
- CNPM命令安装
- npm 是从国外服务器下载安装
- cnpm是从国内服务器安装
- cnpm安装:npm install -g cnpm --registry=https://registry.npm.taobao.org
- cnpm安装成功后就可以使用cnpm install了
NPM命令大全:
1、设置npm路径
#全局安装路径
npm config set prefix "D:\Program Files\nodejs\node_global"
#缓存路径
npm config set cache "D:\Program Files\nodejs\node_cache"
2、设置镜像
#1,淘宝镜像源
npm config set registry https://registry.npmmirror.com
npm config set registry https://registry.npm.taobao.org
#2,腾讯云镜像源
npm config set registry http://mirrors.cloud.tencent.com/npm/
#3,华为云镜像源
npm config set registry https://mirrors.huaweicloud.com/repository/npm/
# 官方默认全局镜像
npm config set registry https://registry.npmjs.org
#检查当前镜像
npm config get registry
3、常用命令简写说明
-g: #--global 的缩写,表示安装到全局目录里
-S: #--save 的缩写,表示安装的包将写入package.json里面的dependencies
-D: #--save-dev 的缩写,表示将安装的包将写入packege.json里面的devDependencies
i: #install的缩写,表示安装
4、安装模块
npm init # npm 初始化当前目录
npm i # 安装所有依赖
npm install # 安装所有依赖
npm i express # 安装模块到默认dependencies
# 安装指定版本和临时源
npm install -g express@2.5.8 --registry=https://registry.npm.taobao.org
npm i express -g # 会安装到配置的全局目录下
npm i express -S # 安装包信息将加入到dependencies生产依赖
npm i express -D # 安装包信息将加入到devDependencies开发依赖
5、卸载模块
npm uninstall express # 卸载模块,但不卸载模块留在package.json中的对应信息
npm uninstall express -g # 卸载全局模块
npm uninstall express --save # 卸载模块,同时卸载留在package.json中dependencies下的信息
npm uninstall express --save-dev # 卸载模块,同时卸载留在package.json中devDependencies下的信息
6、更新模块
npm update express # 更新最新版本的express
npm update express@2.1.0 # 更新到指定版本号的express
npm update express@latest # 更新到最后的新版本
7、查看命令
npm -v #查看版本号
npm root # 查看项目中模块所在的目录
npm root -g # 查看全局安装的模块所在目录
npm list 或者 npm ls # 查看本地已安装模块的清单列表
npm view express dependencies # 查看某个包对于各种包的依赖关系
npm view express version # 查看express最新的版本号
npm view express versions # 查看所有express历史版本号(很实用)
npm view express # 查看最新的express版本的信息
npm info express # 查看express的详细信息,等同于上面的npm view express
npm list express 或 npm ls express # 查看本地已安装的express的详细信息
npm view express repository.url # 查看express包的来源地址
8、其他命令
npm cache clean # 清除npm的缓存
npm prune # 清除项目中没有被使用的包
npm outdated # 检查模块是否已经过时
npm repo express # 会打开默认浏览器跳转到github中express的页面
npm docs express # 会打开默认浏览器跳转到github中express的README.MD文件信息
npm home express # 会打开默认浏览器跳转到github中express的主页
9、通过使用淘宝定制的cnpm安装
npm install -g cnpm --registry=https://registry.npmmirror.com
npm install -g cnpm --registry=https://registry.npm.taobao.org
# 查看版本号
cnpm -v
vue全家桶进阶之路4:NPM包的更多相关文章
- Vue 全家桶 + Electron 开发的一个跨三端的应用
代码地址如下:http://www.demodashi.com/demo/11738.html GitHub Repo:vue-objccn Follow: halfrost · GitHub 利用 ...
- 用 Vue 全家桶二次开发 V2EX 社区
一.开发背景 为了全面的熟悉Vue+Vue-router+Vuex+axios技术栈,结合V2EX的开放API开发了这个简洁版的V2EX. 在线预览 (为了实现跨域,直接npm run dev部署的, ...
- Vue全家桶介绍
一直不清楚全家桶是什么玩意,上网搜了一下,才知道就是平时项目中使用的几个依赖包,下面分享一下 Vue 全家桶介绍 Vue有著名的全家桶系列,包含了vue-router(http://router.vu ...
- 升级vue全家桶过程记录
背景 如果你使用了element-ui的el-tabs组件,并且想要单独升级element-ui至2.10.0,你会发现,使用了el-tabs组件的页面只要打开就卡死.原因是element-ui~2. ...
- [在线+源码]vue全家桶+Typescript开发一款习惯养成APP
# vue-ts-daily 基于Vue.js的2.5.13版本和TypeScript编写的模仿原生应用的WebApp. [源码地址](https://github.com/xiaomuzhu/vue ...
- 【实战】Vue全家桶(vue + axios + vue-router + vuex)搭建移动端H5项目
使用Vue全家桶开发移动端页面. 本博文默认已安装node.js. github链接 一.准备工作 安装vue npm install vue 安装脚手架vue-cli npm install -g ...
- vue证明题一,vue全家桶的构成
简单说下vue的构成,当然是简单为主,网上这东西满天飞,简单说几句就ok 1.vue是什么 vue读作view,是一种js框架.只关注于视图层,操作内容包括js,html,css 2.vue全家桶是什 ...
- vue全家桶(3.1)
4.数据请求 4.1.axios是什么? axios 是一个基于Promise 用于浏览器和 nodejs 的 HTTP 客户端,它有以下特征: 从浏览器中创建 XMLHttpRequest 从 no ...
- Vue全家桶之组件化开发
Vue全家桶之组件化开发 一.组件 组件 (Component) 是 Vue.js 最强大的功能之一 组件可以扩展 HTML 元素,封装可重用的代码 二. 组件注册 2.1 全局注册 Vue. ...
- vue全家桶+axios+jsonp+es6 仿肤君试用小程序
vue全家桶+axios+jsonp+es6 仿肤君试用小程序 把自己写的一个小程序项目用vue来实现的,代码里面有一些注释,主要使用了vue-cli,vue,vuex,vue-router,axoi ...
随机推荐
- github相关操作
github里面有很多大神写的代码,但是有不少小伙伴对使用它比较的生疏,下面我就把它的简单和常规的操作说一下,希望对你查看github有一定的帮助. watch :会持续收到该项目的动态 fork : ...
- Android笔记--为活动补充附加信息
利用资源文件配置字符串 具体实现: 利用元数据传递配置信息 给应用页面注册快捷方式 Label属性,需要定义到strings.xml文件里面去:
- 干货来袭!3天0基础Python实战项目快速学会人工智能必学数学基础全套(含源码)(第3天)概率分析篇:条件概率、全概率与贝叶斯公式
第1天:线性代数篇:矩阵.向量.实战编程 第2天:微积分篇:极限与导数.梯度下降.积分.实战编程 第3天:概率分析篇:条件概率与全概率.贝叶斯公式.实战项目 目录 前言 一.概率与机器学习 1.1 概 ...
- fortify Unsafe JNI
Unsafe JNI 主要解决问题: 1.system.currentTimeMillis(); 使用SystemClock.now()替换. 2.isAssignableFrom(); 使用新定义的 ...
- Spring 注解整理
更多内容,前往IT-BLOG 一.核心容器 [1]@Configuration:告诉 Spring 这是一个配置类(配置类=配置文件)[2]@Bean:给容器中注册一个 Bean :类型为返回值类型, ...
- Windows无线连接路由器成功但无法网
Windows10连接Wifi成功,任务栏无线图标没有感叹号,但是无法连接到网络,重启电脑才能连接上,手机连接这个网络却可以一直联通.本人使用的是intel 9260无线网卡,经过测试,我通过这个方法 ...
- urllib.request发送get请求
发送请求 urllib.request库 模拟浏览器发起一个HTTP请求,并获取请求响应结果 urllib.request.urlopen的语法格式 urllib(url.data = None,[t ...
- [C++STL教程]2.queue队列容器,小白都能看懂的讲解!
在学习数据结构的时候我们会听到这样一个词:队列. 本文将介绍STL中的队列:queue 本文仅从入门和实用角度介绍queue的用法,主要针对初学者或竞赛向.如有不严谨的地方欢迎指正!本文长度约2000 ...
- MATLAB计算变异函数并绘制经验半方差图
本文介绍基于MATLAB求取空间数据的变异函数,并绘制经验半方差图的方法. 由于本文所用的数据并不是我的,因此遗憾不能将数据一并展示给大家:但是依据本篇博客的思想与对代码的详细解释,大家用自己 ...
- CSS伪元素详解以及伪元素与伪类的区别
前面已经介绍过CSS伪类的知识,具体可见前文 CSS伪类知识详解. 伪元素常常被误解为伪类,主要在于他们的语法相似,都是对于选择器功能的扩展,相似程度很高导致被混淆. 本文通过详细介绍伪元素和常见的使 ...